包裝不隨內容擴展

我正在爲我的頁面創建一個幻燈片進/出側欄，但我不能這樣做，除非我的包裝DIV覆蓋了整個身體的寬度和高度，而不是我不知道爲什麼。包裝不隨內容擴展

我不完全確定要包含哪些代碼，所以我在這裏包含了一些我認爲是的東西。如果你需要預覽所有的代碼，我在下面提供了一個Pastebin鏈接。

問題的圖片 - http://i.imgur.com/wWNAeBP.png enter image description here 查看所有的代碼這裏如果需要的話：

HTML - http://pastebin.com/TQT6Xc4z CSS - http://pastebin.com/mS5Gh56x

在此先感謝。

HTML：

<div id="wrapper"> 
    <div id="sidebar"> 
     <nav id="nav"> 
      <h3 id="welcometext">Welcome To<br>Lakeside Books</h3> 
      <div id="searchbar"> 
       <form action="http://www.example.com/search.php"> 
        <input type="text" name="search" placeholder=" Book Search" class="searchstyle"/> 
       </form> 
      </div> 
      <ul> 
       <li style="background-color: #333"> 
        <a href="1Index.html" class="link"> 
         <span style="color: #ed786a">Home</span> 
        </a> 
       </li> 
       <li> 
        <a href="2Catgeories.html" class="link"> 
         Categories 
        </a> 
       </li> 
       <li> 
        <a href="http://example.com" class="link"> 
         Bestsellers 
        </a> 
       </li> 
       <li> 
        <a href="http://example.com" class="link"> 
         Find Us 
        </a> 
       </li> 
       <li> 
        <a href="http://example.com" class="link"> 
         Contact 
        </a> 
       </li> 
      </ul> 
     </nav> 
    </div>

CSS：

html, body { /* ### */ 
    margin:0; 
    padding:0; 
    height:100%; 
    width:100%; 
} 
body { 
    background-color: #fdfdfd; 
    font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI"; 
} 
#wrapper { 
    width: 100%; 
    height: 100%; 
    margin:0 0 0 20%; /* ### */ 
} 
#sidebar { 
    background-color: #212528; 
    position: fixed; 
    width: 20%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
    text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1); 
}

是否真的一直停留在這了好一會兒，現在試圖創建的打開和關閉邊欄，以便將感謝任何幫助了！

來源

2015-04-23 SavageSpud

@Careen不能完全確定你是什麼意思？ – SavageSpud

@Careen它已經在那裏。 – SavageSpud

@Careen html，body {margin：0;填充：0;高度：100％; width：100％} – SavageSpud

通過你的容器和刪除：

height: 100%; // this is scaling your containers to the window height leaving white space... 

    #containerthree { 
    width: 80%; 
    height: 100%; <-- here is the problem 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    color: #888888; 
    padding: 0 0 2em 0; 
    border-bottom: 2px solid #DADADA; 
    box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA; 
    }

來源

2015-04-23 01:56:22 Careen

試圖改變自己的包裝css來

#wrapper { 
    width: 100%; 
    height: auto; 
    overflow:auto; 
    margin:0 0 0 20%; /* ### */ 
}

來源

2015-04-23 02:16:26 Katrin

包裝不隨內容擴展

回答

相關問題