没有滚动条

100％的股利高度我有一个两分栏布局：没有滚动条

<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; 
}

...但我得到的，因为头的23像素高度的滚动条。我试图用溢出来解决它：为body元素隐藏，但我不知道这是否是正确的解决方案。

任何想法？

来源

2010-11-25 Lost in OWL

您的演示代码中存在一些错误。我猜#sidewrapper其实是#sidebar，#contentwrapper其实是#content？ – Gidon 2010-11-25 08:24:56

对不起，我更新了我的代码 – 2010-11-25 08:30:45

如果我的假设我提出我的问题的评论是正确的，那么sidebar是100%高，最重要的是你有一个23px头，让你causs容器中100% + 23px高。

未来，您将在css calc()http://hacks.mozilla.org/2010/06/css3-calc/。这将解决您的问题。

现在，我想你应该通过javascript来计算边栏的高度（=容器的高度 - 23px）。

来源

2010-11-25 08:28:30 Gidon

请注意`calc（）`不适用于所有浏览器，并且可以禁用Javascript。 – Shikiryu 2010-11-25 08:49:20

事实上，calc（）是一个CSS事物，几乎不会在任何浏览器上运行。 – Gidon 2010-11-25 08:50:16

将元素的高度与其父元素进行比较。在你的情况下，我建议你指定“containter”的高度为&，因为在很多机器上很难假装屏幕的大小。

如果你坚持使用百分比，我建议你使用这两个元素，如标题25％的高度和内容75％的高度。

来源

2010-11-25 08:29:30

使#header位置绝对。这会将该块切掉正常流程，并且可以使其他块的高度等于其父项。

#header { 
    position: absolute; 
    width: 100%; height: 23px; 
    top: 0; left: 0; 
} 
#sidewrapper, 
#contentwrapper { 
    float: left; 
    width: 50%; 
    height: 100%; 
} 
#sidewrapper .content, 
#contentwrapper .content { 
    margin-top: 23px; 
}

来源

2010-11-25 08:52:23 vtambourine

回答

相关问题