我有一个项目（例如，一个 div 标签，它占据屏幕宽度的 1/3，最小宽度为 500px，最大宽度为 700px。在它旁边，还有另一个项目占据屏幕的其余部分。如果我只是指定 66% 的宽度，只要其他项目的高度不采用最大值之一，它就可以正常工作，此时会发生溢出或该项目只是让空间出来。
有什么想法可以通过 html 来完成此操作，而无需构建过于复杂的 JavaScript 脚本吗？
此致，
斯特凡
编辑代码：
这提供了一个简单的例子，只要网站在 500px 以下，两者都是屏幕的 50%，但如果变大，右侧（标记为 world）应该填充超过 50%。
<html>
<head>
<style type="text/css">
* {
border: 1px solid black;
}
html,body,.fullheight {
height: 99%;
width: 99%;
}
table {
table-layout: auto;
}
.minfield {
max-width: 250px;
border: 1px solid red;
overflow: hidden;
}
.leftfloat{
float: left;
}
.maxsize{
height: 99%;
width: 49%;
}
</style>
</head>
<body>
<div class="fullheight">
<div class="leftfloat minfield maxsize">
<p>hello</p>
</div>
<div class="leftfloat maxsize">
<p>world</p>
</div>
</div>
</body>
Demo|全屏
可能重复：让 div 填充剩余的屏幕空间
另一个：如何制作一个div来填充剩余的水平空间（对于CSS专家来说是一个非常简单但令人烦恼的问题）
EDIT:看看我使用之前提供的解决方案之一做了什么：
<html>
<body>
<div class="fullHeight">
<div class="minField maxSize"><p>hello</p></div>
<div class="maxField maxSize"><p>World</p></div>
</div>
</body>
</html>
* {
border: 1px solid black;
}
html,body,.fullHeight {
height: 99%;
width: 99%;
}
.maxSize{
height: 99%;
}
.minField{
float:left;
width:250px; /* This is a must so you could define min/max */
max-width:250px;
width: expression(this.width > 250 ? 250: true); /* IE Hack for max-width */
background-color:#ff0000;
}
.maxField {
margin-left: 250px;
background-color:#00FF00;
}
jsFiddler代码 | jsFiddle 全屏
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
