沒有滾動條

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

回答

相關問題