無法獲得「內容」div來延長頁面的長度

Question

我已經谷歌搜索並嘗試了所有他們建議，它似乎並沒有工作。

我正在製作一個模板 - 因此它必須位於一個HTML文件中。我猜測有些東西對我的CSS有些詭異，我只是沒有抓到...我已經掃描了好幾次。

圖片的問題（我想白延伸到頁面的底部，即使沒有足夠的內容）：

CSS（還有更多，但我想這些是唯一有問題的那些）：

html, body 
{ 
    padding: 0px; 
    min-height: 100%; 
    margin: auto; 
    background-image: url("http://www.pixieduststudio.net/images/stripes.png"); 
    background-repeat: repeat; 
} 

#wrapper 
{ 
    width: 80%; 
    margin: auto; 
    background-color: transparent; 
} 

#navbar 
{ 
    background-color: white; 
    text-align: center; 
    width: 100%; 
    border-bottom-right-radius: 0px; 
    border-bottom-left-radius: 0px; 
    display: block !important; 
    margin: auto; 
    height: 75px; 
} 

#sidenav 
{ 
    width: 20%; 
    float: left; 
    border-bottom-left-radius: 5px; 
    border-right: 1px solid pink; 
    background-color: white; 
} 

#content 
{  
    padding: 25px; 
    width: 80%; 
    float: left; 
    background-color: white; 
    margin: auto; 
} 

#content #pageTitle 
{ 
    margin: 0; 
    padding: 25px; 
    letter-spacing: 3px; 
} 

#pageContent, img 
{ 
    width: 80%; 
} 

HTML

<div id="wrapper"> 
    <div id="navbar" class="navbar navbar-default" role="navigation"> 
     <ul id="nav"> 
      <!-- LINK ARE HERE BUT I REMOVED THEM --> 
     </ul> 
    </div> 
    <div id="sidenav"> 

     <div id="socialBar"> 
      <a href="https://www.facebook.com/pixieduststudio?fref=ts"><img src="http://www.pixieduststudio.net/images/facebook.png"></a> 
      <a href="http://www.online-instagram.com/user/pixie_dust_studio/435027170"><img src="http://www.pixieduststudio.net/images/Instagram.png"></a> 
      <img src="http://www.pixieduststudio.net/images/EmailUs.png"> 
     </div> 

     <div id="shopBar"> 
      <img src="http://www.pixieduststudio.net/images/shoppen.png"> 
       <hr class="section"> 
        <figure> 
         <a href="http://www.pixieduststudio.net/go/order.php?"><img class="icon" src="http://www.pixieduststudio.net/images/bag.png"></a> 
        </figure> 
      <img src="http://www.pixieduststudio.net/images/shopinfpen.png"> 
       <hr class="section"> 
       <div class="sidelinks"> 
        <li><a href="http://www.pixieduststudio.net/pages/MeetPixie.htm">Meet Pixie</a></li> 
        <li><a href="http://www.pixieduststudio.net/weblinks.htm">Shipping</a></li> 
        <li><a href="http://www.pixieduststudio.net/sitemap.htm">Site Map</a></li> 
        <li><a href="http://www.pixieduststudio.net/orders.htm">Order Tracking</a></li> 
        <li><a href="http://www.pixieduststudio.net/guestbook.htm">Guest Chat</a></li> 
       </div> 
      <img src="http://www.pixieduststudio.net/images/searchpen.png"> 
       <hr class="section"> 
       <p style="margin: 25px;">%SEARCH_SITE%</p> 
     </div> 

    </div> 
    <div id="content"> 
     <img id="pageTitle" class="img-responsive" src="http://www.pixieduststudio.net/images/headertitle.png" /> 
     <hr> 
     %CONTENT% 
     <!--<p id="pageContent" style="padding: 25px;">    
      <img src="http://www.pixieduststudio.net/images/camp.png"> 
     </p>--> 

    </div> 

    <div id="foot"> 
     <!--<img src="images/footer.png">--> 
    </div> 
</div> 

Answer 1

必須將background-color: white;移動到#wrapper（它是內容和邊欄的容器），才能使滿框bg變白。

將#sidenav和#content更改爲display: inline-block而不是float: left以允許#wrapper調整爲其內容的高度。加上vertical-align: top，這樣他們就可以正確對齊。

#wrapper 
{ 
    width: 80%; 
    margin: auto; 
    background-color: white; 
} 

#sidenav 
{ 
    width: 20%; 
    display: inline-block; 
    vertical-align: top; 
    background-color: white; 
} 
#sidenav .nav { 
    border-bottom-left-radius: 5px; 
    border-right: 1px solid pink; 
} 
#content 
{  
    padding: 25px; 
    width: 80%; 
    display: inline-block; 
    vertical-align: top; 
    margin: auto; 
} 

您還可以擺脫對#sidenav的1px的右邊界，這將使#wrapper指定的內容加起來其超過100％，（因此包裝）的。

更改sidenav內容：

<div id="sidenav"> 
    <div class="nav"> 
     ... 
    </div> 
</div> 

Answer 2

爲了解決這個問題，你可以改變你的容器的高度使用vh單元

在你的CSS，設置您的主要的高度內容容器：

#content 
{  
    height: 100vh; 
} 

這將容器的高度設置爲瀏覽器的垂直高度在視口中的100％，請注意這可能與舊版瀏覽器存在兼容性問題。

在你的問題的情況下，還需要將父元素的高度設置爲100vh過，這是因爲子元素（你的主要內容），將適合其父母的高度，這並不符合100%整個頁面，要解決這個問題，請將以下內容添加到您的css中：

#wrapper 
{ 
    height: 100vh; 
} 

子元素現在可以填充整個屏幕。

Answer 3

考慮下面的例子...

CSS

html, 
 
* 
 
{ 
 
    border  : 0; 
 
    box-sizing : border-box; 
 
    margin  : 0; 
 
    padding  : 0; 
 
} 
 

 
#wrapper 
 
{ 
 
    background-color : red; 
 
    display   : flex; 
 
    min-height  : 100vh; 
 
} 
 

 
#col-1 
 
{ 
 
    background-color : blue; 
 
    display   : block; 
 
    float   : left; 
 
    width   : 25%; 
 
} 
 

 
#col-2 
 
{ 
 
    background-color : yellow; 
 
    display   : block; 
 
    float   : left; 
 
    width   : 75%; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 
    <head> 
 
     <meta charset = "utf-8"> 
 
\t \t 
 
     <meta name = "viewport" 
 
\t \t  content = "width = device-width, initial-scale = 1.0" 
 
\t \t > 
 

 
\t \t <link href = "CSS/Example.css" 
 
\t \t  rel = "stylesheet" 
 
\t \t  type = "text/css" 
 
\t \t > 
 

 
     <style> 
 
     </style> 
 
    </head> 
 

 
    <body> 
 
     <div id="wrapper"> 
 
      <div id = "col-1"> 
 
       <p>Column1</p> 
 
       <p>Column1</p> 
 
       <p>Column1</p> 
 
      </div> 
 
      
 
      <div id = "col-2"> 
 
       <p>Column2</p> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

的*在CSS文件部分擺脫任何默認邊框，邊距和填充的所有元素，除非它們隨後被指定。盒子大小：邊框;線確保任何邊框，邊距和填充都包含在指定的寬度和高度內，這使得佈局頁面更容易。

請訪問https://css-tricks.com/snippets/css/a-guide-to-flexbox/瞭解flexbox的說明。

將此結構應用於頁面應該很好地解決指定的問題。

如果您有任何問題，請隨時回覆。