100％高度左邊欄與動態權利的內容 - 引導+ Wordpress

我正在使用Bootstrap和Wordpress的網站。這是一個2列布局 - 左邊欄，右邊的內容。正確的內容是動態的，並通過無限滾動擴展。我試圖通過幾種技術使左邊欄100％的高度，但無濟於事。100％高度左邊欄與動態權利的內容 - 引導+ Wordpress

我希望側欄根據視口的大小/正確內容div的高度繼續下去。

我做了一個小提琴：http://jsfiddle.net/ydPMr/3但如果你在我的開發頁面上看到我正在談論的內容會更好：http://joshuawalker.koding.com。

這裏是我的網頁的基本結構：

<div class="navbar navbar-inverse navbar-static-top"> 
<div class="navbar-inner"></div> 
</div> 
<div class="wire-unit hero-fix"> 
</div> 
<div class="sidebar hidden-phone"></div> 
<div class="content"></div>

如果任何人有關於如何使側邊欄伸展全高的任何想法，我將不勝感激。

謝謝！

來源

2012-12-17 Joshua Walker

這是做了一件棘手的事情。你可以使用jQuery完成它，或者將左側邊欄粘貼到展開的div中，並將左側邊欄的高度設置爲100％，並確保其內部的div具有position：relative屬性。 –

您可能會發現這個答案有幫助：http://stackoverflow.com/a/8741070/681807 –

感謝您的幫助，@ MyHeadHurts和@ TrevanHetzal。爲了未來的發展將牢記你的想法。 –

這對我來說工作得很好。 Fiddle

我將min-Height設置爲500px。如果您不想要最低限度，請將其刪除。它將根據您在content div中的內容的height進行工作。像這樣Fiddle

<div class="wrapper"> 
    <div class="sidebar hidden-phone"> 
    </div> 
    <div class="content"> 


    </div> 
</div>

和風格

<style type="text/css" > 
    .wrapper 
    { 
     min-height:100%; 
     width:100%; 
     position:relative; 
     background-color:Black; 
     display:inline-block; 
    } 
    .sidebar 
    { 
     width:20%; 
     top:0px; 
     left:0px; 
     bottom:0px; 
     position:absolute; 
     background-color:Aqua; 
    } 
    .content 
    { 
     min-height:500px; 
     width:80%; 
     position:relative; 
     background-color:Gray; 
     float:right; 
    } 
</style>

來源

2012-12-17 07:48:32

這個解決方案對我來說效果很好。謝謝！ –

側邊欄內容不應該出現在搜索引擎優化目的的內容區域之後嗎？ – Shoebox

但是側邊欄不會隨着自己的內容而增長... –

100％高度左邊欄與動態權利的內容 - 引導+ Wordpress

回答

相關問題