我有一个项目(例如div标签,它占据屏幕宽度的1/3,最小宽度为500px,最大宽度为700px。除此之外,还有另一个项目需要剩下的如果我只指定了66%的宽度,只要另一个项目的高度没有采用其中一个最大值,就可以正常工作,此时会发生溢出或者项目只是让空间出来。
这些是由html完成而没有构建过于复杂的javaScript脚本的想法吗?
最好的问候, 斯蒂芬
编辑代码: 这可以提供一个简单的例子,只要网站低于500px,两者都是屏幕的50%,但如果它变大,右侧(标有世界)应填写超过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>
答案 0 :(得分:2)
可能重复:Make a div fill the remaining screen space
修改强> 看看我之前使用我之前提供的解决方案做了什么:
<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;
}