css – 没有滚动条的100%Div高度

前端之家收集整理的这篇文章主要介绍了css – 没有滚动条的100%Div高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有两列布局:
<html>
 <head></head>
 <body>

    <div id="container">
        <div id="header"></div>
        <div id="sidewrapper"></div>
        <div id="contentwrapper"></div>
    </div>
 </body>
</html>

我希望侧边栏内容的高度均为100%,但最顶层容器的最小高度应为100%.

我尝试使用以下css解决它:

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: Georgia,serif;
    color: #000; height:100%; min-height:100px;
}

body {
    background: #fff; height:100%; min-height:100px; overflow:hidden;   
}

#header {
width: 100%;
position: relative;
float: left;
height: 23px;
}

#container {
    position:relative;
    width: 100%; height:100%;
    margin: auto; background:blue;
}

#contentwrapper {
    float:left;
    background:red;
    position: relative;
    width: 700px; padding:0px; margin:0px;
    height: auto; 
}

#sidewrapper {
    float:left;
    position: relative;
    width: 159px; height:100%; 
    padding:0px; margin:0px;
}

…但由于标题的高度为23px,我得到一个滚动条.我尝试用overflow解决它:隐藏为body元素但我不知道这是否是正确的解决方案.

有任何想法吗?

解决方法

如果我在我对这个问题的评论中提出的假设是正确的,那么侧边栏是100%高,而且最重要的是你有一个23px的标题,所以你的容器要高100%23px.

将来你将拥有css calc()http://hacks.mozilla.org/2010/06/css3-calc/.这将解决您的问题.

现在,我猜您应该通过javascript计算侧边栏的高度(=容器的高度 – 23px).

猜你在找的CSS相关文章