使用CSS展開基於內容的div？

之前，我問我的問題，我想讓你知道，你看到的jsfiddle什麼是不準確的，你看到一個普通的瀏覽器是什麼。您實際上不必滾動實際瀏覽器，並且頁腳位置固定。你有一個頁眉和一個固定的頁腳，內容div是950px，它可以填充頁眉和頁腳之間的空白而不需要滾動。

這就是說你可以看到頁眉和頁腳之間的中間黑色內容div。我的問題是，我把它設置爲950px，它填補了頁眉和頁腳之間的差距。如果頁面上的內容大於我設置的950px的大小，我希望我的div可以通過滾動進行擴展。有沒有辦法做到這一點，或者我只需要根據我添加多少內容直接爲每個頁面設置div？我只想要滾動功能添加，如果它超過了950px。

HTML：

<body> 
      <body> 
       <div id="page"> 

         <div id="header"> 


         </div> 




         <div id="main"> 
         </div> 




         <div id="footer"> 
           <h4>WNG Product Development Engineering (US)</h4> 
           <a href="">Circuit</a> 
           <a href="">Contact Us</a> 
         </div> 

       </div> 
     </body> 


</body>

CSS：

html, body 
{ 
     padding:0; 
     margin:0; 
     height:100%; 
     font-size:1em; 
} 
#page 
{ 
     height:100%; 
     min-width:960px; 
} 
#header 
{ 
     background-color:#115EA2; 
     height:100px; 
     width:100%; 
} 
#main 
{ 
     width:1300px; 
     background-color:black; 
     margin: 0 auto; 
     padding: 20px 20px 40px 20px; 
     color:#115EA2; 
     text-decoration:none; 
     height:950px; 
} 
#footer 
{ 
     position:fixed; 
     width:100%; 
     bottom:0; 
     height: 35px; 
     background-color:#115EA2; 
} 

#footer h4 
{ 
     font-weight: bold; 
     font-family: Verdana, Geneva, Arial, sans-serif; 
     float:left; 
     color:#fff; 
     margin: 10px 0 0 20px; 
} 
#footer a 
{ 
     font-weight:bold; 
     font-family: Verdana, Geneva, Arial, sans-serif; 
     float:right; 
     color:#fff; 
     margin:10px 20px; 
     text-decoration: none; 

} 

#footer a:active {color:#fff;} 
#footer a:hover {color:#fff;} 
#footer a:visited {color:#fff;}

來源

2013-07-26 Krishp

你嘗試#main { min-height: 950px; }？我用不同的高度更新了你的jsFiddle（http://jsfiddle.net/Bz6Ja/1/）並添加了一些內容，這樣你就可以看到側面出現滾動條。您可能需要在與固定頁腳高度相同的#main底部添加頁邊空白。

來源

2013-07-26 21:28:01 hungerstar

這個最小高度究竟是什麼？如果我的內容超過了950像素，那麼會發生什麼？ @hungerstar – Krishp

它會完全符合你的要求。與做本身所說的一樣。它爲塊元素設置最小高度。塊元素可以更大（即內容可以伸展它），但它最低限度會爲您設置的「最小高度」，以防您的內容無法填充到「最小高度」。 – hungerstar

ohhh我明白這是有道理的。我仍然在學習html和css哈哈的過程。非常感謝你！ – Krishp

使用CSS展開基於內容的div？

回答

相關問題