股利超出頁數限制

想不通爲什麼它太高了，不好意思：股利超出頁數限制

html { 
    min-height:100%; 
    position:relative; 
} 

body { 
    height:100%; 
    background-color:darkblue; 
    background-image:url(background.png); 
    background-repeat:repeat-y; 
    background-position:center center; 
    background-size:100% 100%; 
    padding:0; 
    margin:0; 
} 

#wrapper { 
    width:65%; 
    top:0; bottom:0; right:0; left:0; 
    background-color:#bad6e8; 
    border:2px solid black; 
    padding:0; 
    margin: 0 auto; 
} 

#header { 
    width:100%; 
    height:10%; 
    background-color:#bad6e8; 
    border-bottom:2px solid black; 
    padding:2px; 
} 

#user { 
    width:25%; 
    height:250px; 
    background-color:#bad6e8; 
    border-right:2px solid black; 
    border-bottom:2px solid black; 
    float:left; 
    padding:2px; 
} 

#menu { 
    width:100%; 
    height:35px; 
    background-color:#bad6e8; 
    border-bottom:2px solid black; 
    padding:2px; 
    margin-bottom:2px; 
} 

#content { 
    width:100%; 
    height:100%; 
    background-color:lightblue; 
}

和：

<html> 
    <head> 
     <title>Playdux</title> 
     <link rel="stylesheet" type="text/css" href="design.css"> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="header"> 
       Header 
      </div> 
      <div id="content"> 
       <div id="user"> 
        Usermenu 
       </div> 
       <div id="menu"> 
        Menü 
       </div> 
       Content 
      </div> 
     </div> 
    </body> 
</html>

的「包裝」的div應該從頂部一直走下去底部的頁面。停在那裏，除非它有足夠的內容去超越那個。

但是，沒有足夠的內容，它只是超過極限。我的CSS現在有點搞砸了，因爲我總是試圖弄清楚它。

來源

2013-11-28 TemporaryName

這將有助於使這些jsfiddle幫助可視化發生了什麼..在這裏，我已經爲你做了一個：http://jsfiddle.net/bUE4M/ – msturdy

看起來你會很好地使用表....或CSS顯示：表; –

從頂部延伸wrapper至底部，您必須position: absolute或position: fixed

#wrapper { 
    width:65%; 
    position: absolute; 
    top:0; bottom:0; right:0; left:0; 
    background-color:#bad6e8; 
    border:2px solid black; 
    padding:0; 
    margin: 0 auto; 
}

您還必須從content刪除height: 100%。因爲這被解釋爲包含塊的100％，這是在這種情況下wrapper

#content { 
    width:100%; 
    background-color:lightblue; 
}

查看完整JSFiddle

另一種方法來做到這一點，將是丟棄top:0; bottom:0; right:0; left:0; 和做只是height: 100%

html, body { 
    height: 100%; 
} 

#wrapper { 
    height: 100%; 
}

另見JSFiddle

來源

2013-11-28 20:39:01

股利超出頁數限制

回答

相關問題