如何製作延伸至頁面長度的側欄？

如果我把我的側邊欄min-height: 700px;，它工作正常，但是如果內容長度超出700像素，然後邊欄結束，頁面內容佔據了頁面的整個寬度。我希望邊欄沿着頁面的長度逐漸減小，就像內容一樣長或短。如何才能做到這一點？如何製作延伸至頁面長度的側欄？

這裏是我的側邊欄的CSS代碼：

#sidebar 
{ 
    float: right; 
    min-height: 700px; 
    min-width: 25%; 
    background-color: #FFFFFF; 
}

改變高度100%導致側邊欄完全消失。

這裏的HTML代碼;

<bod> 
    <div id="sidebar"></div> 
    <div id="content">Content here....</div> 
</div>

來源

2013-02-06 Click Upvote

給它一個position:absolute;與bottom:0px;

檢查出來：http://jsfiddle.net/AliBassam/McJG8/

HTML

<div id="parentDiv"> 
    <div id="content">Content here....</div> 
    <div id="sidebar"></div> 
</div>

CSS

#parentDiv 
{ 
    position:relative; 
    min-height:700px; 
} 
#sidebar 
{ 
    position:absolute; 
    right:0px; 
    bottom:0px; 
    top:0px; 
    width:100px; 
}

#parentDiv現在有min-height:700px;如果它的內容拉伸，#sidebar也將伸展。

來源

2013-02-06 00:19:40

如果我添加更多的內容不起作用。嘗試複製並在內容DIV這裏粘貼內容''
約100倍 –

http://jsfiddle.net/9Jmsu/2/ –

駕駛室你讓它在過去的jsfiddle我張貼工作？ –

不知道你正在試圖做什麼具體要求，這聽起來好像是很容易使用Faux Columns固定的解決方案。

來源

2013-02-06 00:43:48 SAmetjan

如何製作延伸至頁面長度的側欄？

回答

相關問題