我在页面中创建了两个div,一个是标题,另一个是内容
<div id="main">
<div id="header">
</div>
<div id="content">
</div>
</div>
风格是
<style>
#main{
height:100%;
}
#header{
height:100px
}
#content{
height:???? // to fit the content 100% on any kind of screen
}
</style>
我想根据屏幕调整内容。屏幕高度可以是100px,可能是2000px。我怎么能用css做到这一点。我不希望底部有空格或滚动页面
答案 0 :(得分:2)
如果你使用CSS3很好,这段代码:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#main{
height:100%;
background-color: blue;
}
#header{
height: 10%;
background-color: green;
}
#content{
height: -webkit-calc(100% - 105px);
background-color: red;
}
将在Chrome中做到这一点。您必须为其他浏览器测试calc
属性的替代方案。你必须使用父元素的边距和填充来获得你想要的效果,但这是个主意。
如果CSS3不是一个选项,那么你将不得不以百分比定义你的标题,除非比我聪明的人能给你一个更好的选择:)。
答案 1 :(得分:1)
如果你想使用css进行这种布局,你必须看看这些。
display: box;
或强>
height: calc(100% - 100px);
但旧浏览器不支持这些。 display:box在ie9中不起作用。
所以做一些javascript。
document.getElementById('content').style.height = (document.getElementById('main').clientHeight - 100) + "px";
在body的onload事件中调用它。
答案 2 :(得分:1)
添加这些行
html,body{height:100%;}.
#main{height:100%; }
#header{height:100px; background:#ccc; }
#content{min-height:90%; background:#666; }
这将使您在屏幕中进行调整
答案 3 :(得分:0)
添加html, body { height: 100%; }
并使用position:absolute
让内部div都有position:absolute
,它应该从浏览器的顶部开始。使用z-index
切换div。
HTML
<div id="main">
<div id="header">c
</div>
<div id="content">
<div class="hidden">This div helps to push the content 100px below</div>
cxbvbvbvcbv
</div>
</div>
<强> CSS 强>
html, body { height: 100%; }
#main{height:100%; position:relative}
#header{height:100px; background:green; position:absolute; top:0; left:0; width:100%; z-index:1000}
#content{height:100%; background:grey; position:absolute; top:0; left:0; width:100%; z-index:1; }
<强> DEMO Updated 强>
答案 4 :(得分:0)
在css中试试这个
html, body { height: 100%; }
#main{height:100%; overflow:hidden}
#header{height:100px; background:green; }
#content{height:100%; background:#F00; overflow:auto; }
这是小提琴link