如何使DIV（SIDEBAR）擴展到滾動頁面的末尾？

我正在嘗試將邊欄放到#SUBCONTAINER div的末尾。這是HTML代碼：如何使DIV（SIDEBAR）擴展到滾動頁面的末尾？

<body> 
<div id="container"> 
    <div id="subcontainer"> 
     <div id="sidebar"> 
      <div class="logo"> 
      <img src="pictures/icon.png" alt="LOGO"> 
      </div> 
     </div> 
     <div id="pagecontainer"> 
      <div class="page"> 
      <p>Lorem ipsum dolor sit amet...</p> 
      </div> 
     </div> 
    </div> 
    <div id="footer"> 
    footer 
    </div> 
</div> 
</body>

，這是我現在使用的CSS：

html, body { 
    background-color:#ffffff; 
    margin:0 0 0 0; 
    height:100%; 
} 

#container { 
    position:relative; 
    width:100%; 
} 

#subcontainer { 
    position:relative; 
    clear:both; 
} 

#sidebar { 
    width:20%; 
    float:left; 
    background-color:#BD4538; 
    color:white; 
} 
    .logo { 
     text-align:center; 
     left:50%; 
     right:50%; 
     border-left:-8em; 
     border-right:-8em; 
    } 

#pagecontainer { 
    width:80%; 
    float:right; 
    background-color:#FFFFFF; 
    color:black; 
} 

    .page { 
     padding:1em 1em 1em 1em; 
     background-color:#FFFFFF; 
     color:black; 
    } 

#footer { 
    clear:both; 
    height:10em; 
    width:100%; 
    bottom:0; 
    background-color:#B82928; 
    color:white; 
} 

p { 
    margin: 0em 0em 0em 0em; 
    text-align:justify; 
    text-indent:1em; 
}

可惜的是在SIDEBAR DIV不會擴展到父子容器結束容器，所以如果我有更長的文字在PAGECONTAINER DIV，我會看到父母BODY的白色背景SIDEBARE DIV。

我想到了一個絕招：如果我改變容器的背景PAGECONTAINER到SIDEBAR的BGCOLOR我有我想要的東西，但我工作的一個迴應式網站這樣SIDEBAR需要改變位置並去到pabe頂部

那麼，有什麼建議？

來源

2014-02-24 dcdeiv

我已經修改了代碼點點。通常要做一個等高的列div display:tabledisplay:table-cell使用的屬性。

html, body { 
    background-color:#ffffff; 
    margin:0 0 0 0; 
    height:100%; 
} 

#container { 
    width:100%; 

} 

#subcontainer { 
display:table; 

} 

#sidebar { 
    width:20%; 
    background-color:#BD4538; 
    color:white; 
display:table-cell; 
} 
    .logo { 
     text-align:center; 
     border-left:-8em; 
     border-right:-8em; 
    } 

#pagecontainer { 
    width:80%; 
    display:table-cell; 
    background-color:#FFFFFF; 
    color:black;}

工作演示鏈接。 http://jsbin.com/mopunime/1/edit enter image description here

來源

2014-02-24 20:29:46

它不起作用。文字現在在標誌看到這裏：http：//jsfiddle.net/z56S3/2/ – dcdeiv

你是在談論腳註文本嗎？ –

在我在評論中鏈接的演示鏈接中，腳註沒有問題。正在談論Lore在**＃PAGECONTAINER中的文本** **＃SUBCONTAINER **的孩子，** SIDEBAR **右側的DIV。看看鏈接（http://jsfiddle.net/z56S3/2/），你會看到。 – dcdeiv

如果你想要的是，DIV「側邊欄」配合（寬度或高度）到div「子容器」，那麼這樣做：

#sidebar { 
    width:100%; 
    height: 100%; 
    float:left; 
    background-color:#BD4538; 
    color:white; 
}

來源

2014-02-24 20:24:37

我已經嘗試過，這就是我得到:( http://jsfiddle.net/z56S3/3/ – dcdeiv

無論從#sidebar DIV刪除「浮動」屬性和#pagecontainer格，並將它們設置爲display: table-cell; 另外，將#subcontainer設置爲display:table和width:100%;。這將使側邊欄和pagecontainer填充子容器div。

檢查出來：

html, body { 
    background-color:#ffffff; 
    margin:0 0 0 0; 
    height:100%; 
} 

#container { 
    position:relative; 
    width:100%; 
} 

#subcontainer { 
    position:relative; 
    display: table; 
    clear:both; 
    width: 100%; 
} 

#sidebar { 
    width:20%; 
    display: table-cell; 
    background-color:#BD4538; 
    color:white; 
} 
    .logo { 
     text-align:center; 
     left:50%; 
     right:50%; 
     border-left:-8em; 
     border-right:-8em; 
    } 

#pagecontainer { 
    width:80%; 
    display:table-cell; 
    background-color:#FFFFFF; 
    color:black; 
} 

    .page { 
     padding:1em 1em 1em 1em; 
     background-color:#FFFFFF; 
     color:black; 
    } 

#footer { 
    clear:both; 
    height:10em; 
    width:100%; 
    bottom:0; 
    background-color:#B82928; 
    color:white; 
} 

p { 
    margin: 0em 0em 0em 0em; 
    text-align:justify; 
    text-indent:1em; 
}

這裏的小提琴：http://jsfiddle.net/z56S3/

來源

2014-02-24 20:25:39 LcSalazar

可惜的是它不工作得很好。在#SIDEBAR是的，現在適合父DIV，但看看會發生什麼，如果我改變了LOGO.png TEXT開始的大小，只是在LOGO.png的128px高度之後，看看這裏：http://jsfiddle.net/z56S3/ – dcdeiv

如何使DIV（SIDEBAR）擴展到滾動頁面的末尾？

回答

相關問題