100%的内容高度 - px

时间:2012-11-04 07:34:13

标签: html css height

我的页面高度为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,但它没有帮助(滚动仍显示)。

实例:http://indoor.powerhtml.ru/30/index.html

1 个答案:

答案 0 :(得分:2)

CSS无法在页面上执行计算和操作,它只是一个样式表。你必须使用JS。

jQuery片段可以做你想做的事情

$("#header").height($("#header").height()); //This automatically converts % to px

Check it out