我的页面高度为100%:
<div id="wrapper">
<header id="header" class="clearfix">
</header>
<div class="main-container clearfix">
<aside id="sideLeft">
</aside><!-- #sideLeft -->
<div id="content">
<div id="map_canvas"></div>
</div>
</div> <!-- #main-container -->
</div><!-- #wrapper -->
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
min-height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
}
#header {
width: 100%;
height: 45px;
}
.main-container {
width: 100%;
height: 100%;
min-height: 100%;
}
#content {
height: 100%;
margin-left: 20%;
}
#map_canvas {
height: 100%;
width: 100%;
}
#sideLeft {
height: 100%;
width: 20%;
float: left;
}
但我想让内容100% - 标题高度(以px为单位),不要在页面上显示滚动。
我尝试将position: absolute;
添加到#header
和.main-container
,但它没有帮助(滚动仍显示)。
答案 0 :(得分:2)
CSS无法在页面上执行计算和操作,它只是一个样式表。你必须使用JS。
jQuery片段可以做你想做的事情
$("#header").height($("#header").height()); //This automatically converts % to px