CSS佈局：高度100％的div（裏面還有更多的div）有兩個固定的高度divws

下面是HTML代碼：CSS佈局：高度100％的div（裏面還有更多的div）有兩個固定的高度divws

<div id="header"> 
    </div> 
    <div id="container"> 
     <div id="leftbar"> 
     </div> 
     <div id="content"> 
     </div> 
    </div> 
    <div id="footer"> 
    </div>

，這裏是我想要的東西，以實現的，即使它是不是有效CSS，但我想你會明白我的觀點：

html,body 
    { 
    min-width:800px; 
    max-width:1680px; 
    width:100%; 
    height:100% 
    } 
    #header 
    { 
    width:100%; 
    height:100px; 
    background:#CCCCCC url(images/header_bg.gif) repeat-x; 
    } 
    #footer 
    { 
    width:100%; 
    height:10px; 
    } 
    #container 
    { 
    width:100%; 
    height:100%-100px-10px; /* I want #container to take all the screen height left */ 
    } 
    #leftbar /*fixed width, the height is always the same as the screen height*/ 
    { 
    height:100%; 
    width:200px; 
    } 
    #content 
    { 
    height:100%; 
    width:100%-200px; /* take all the screen width left except the leftbar */ 
    overflow:auto; 
    }

有人只是把這個作爲一個例子： http://limpid.nl/lab/css/fixed/header-and-footer

我不認爲使用<body>padding到排除頁眉和頁腳是一個很好的途徑，因爲我希望所有滾動條都出現在div＃內容中，而不是用於整個<body>標記。

來源

2009-12-17 WilliamLou

塊元素的正常寬度爲100％，因此您應該只需根據需要添加頁邊距。如果我正確理解你的問題。

來源

2009-12-17 21:07:05

你能更具體嗎？爲div＃內容提供「margin-left：200px」？在這種情況下，div＃內容的寬度是多少，如果它是默認的100％，則沒有辦法將這兩個div並排放置。 – WilliamLou 2009-12-17 22:22:56

你有沒有考慮過使用position：fixed作爲框架元素？還是你堅持支持IE6？

來源

2009-12-17 21:13:32 thomas

水平位可以很容易地

#content {margin-left:200px;} 
#left-bar {float-left;width:100px;}

垂直位是棘手，因爲這裏浮子沒有垂直等效實現。可能工作基本接近的是：

html,body 
{ 
    min-width:800px; 
    max-width:1680px; 
    width:100%; 
    height:100% 
    } 
    #header 
    { 
    width:100%; 
    height:100px; 
    background:#CCCCCC url(images/header_bg.gif) repeat-x; 
    position:absolute; 
    top:0; 
    left:0; 

    } 
    #footer 
    { 
    width:100%; 
    height:10px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    } 
    #container 
    { 
    width:100%; 
    height:100%; 
    margin-top:100px; 
    margin-bottom:10px; 
    } 
    #leftbar 
    { 
    height:100%; 
    width:200px; 
    float:left; 

    } 
    #content 
    { 
    height:100%; 
    margin-left:200px; 
    overflow:auto; 
    }

來源

2009-12-18 01:00:43 wheresrhys

你可以使用calc()，如：

#container { 
    ... 
    height: calc(100% - 100px - 10px); 
}

而且你既可以使用保證金或固定定位到它的位置設置到頭部之間和頁腳。

至於滾動條，只適用於overflow: hidden和body和div#container適用overflow: auto至div#content。

來源

2015-04-15 20:51:53

CSS佈局：高度100％的div（裏面還有更多的div）有兩個固定的高度divws

回答

相關問題