帶有可變頁面內容的邊欄高度

在wordpress中，我在網頁的左側製作了一個側邊欄。所以，首先出現在標題，然後在左側我的側邊欄。帶有可變頁面內容的邊欄高度

的問題是，我的側邊欄，只要我的內容，所以它不是我的網頁的底部和白場停留在底部：

我的HTML工具條：

<div class="sidebar"> 
<ul class="ulsidebar"> 
<li class="lisidebar"><a class="linksidebar" href="home">Home</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">1</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">2</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">3</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">4</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">5</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">6</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">7</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">8</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">9</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">10</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">11</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">12</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">13</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">14</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">15</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">16</a></li> 
<li class="lisidebar"><a class="linksidebar" href="#">17</a></li> 
</ul> 
</div>

和CSS：

.sidebar { 
    z-index:   10; 
    border-top:   2px #000000; 
    position:   absolute; 
    top:    25%; 
    bottom:    0; 
    left:    0; 
    width:    15%; 
    height:    100%; 
    background:   #C6A970; 
} 

.ulsidebar { 
    margin-top:   20%; 
    color:    #ffffff; 
} 

.lisidebar { 
    padding:   8px; 
} 

.linksidebar, .afooter { 
    text-decoration: none; 
    color:    #ffffff; 
} 

.linksidebar:hover, .afooter:hover { 
    text-decoration: none; 
    color:    #000000; 
} 

.content { 
    position:   relative; 
    margin-left:  10%; 
    height:    100%; 
    min-height:   100% !important; 
}

內容類用於旁邊的內容。固定不會對我有幫助，因爲它的頭部有一個空白區域。

這是它的樣子：

  HEADER 
---|--------------------- 
S | 
I | 
D |  CONTENT 
E | 
B | 
A | 
R | 
------------------------- 
WHITE GAB 
------------------------- 
    | 
---|--------------------- 
     FOOTER

沒有人有任何建議，完成我的側邊欄？感謝提前！

來源

2016-03-24 TLR

您能否提供一個在行動中的例子？ –

這就是我現在得到的。內容是它旁邊的塊。 – TLR

我用這個CSS固定我的問題：

.sidebar { 
    padding-bottom: 5000px; 
    margin-bottom: -5000px; 
    overflow:  hidden; 
}

這適用於我。大家好，thanx幫忙！

來源

2016-03-24 15:47:24 TLR

給予100％的高度，以側邊欄或設置一些高度

來源

2016-03-24 12:21:49 Asad

當我這樣做時，大小不會改變。我的內容和頁腳之間仍然有白色的凹凸不平。 – TLR

在我的網頁上，我的頁面中間有100％的位置。這不是我要找的。 – TLR

所以，如果將做你的側邊欄父DIV與位置固定和頂部：0和底部：0，它會從頂部到底部，像這樣的：

div { 
position: fixed; 
    top: 0; 
    bottom: 0; 
    width: 180px; 
    left:0; 
}

檢查：https://jsfiddle.net/nk64k09q/

來源

2016-03-24 13:18:57

我試過這個，但是我的邊欄上面有一個標題。所以這就是爲什麼我不能使用固定位置。這就是爲什麼我要找位置：絕對的或相對的。 – TLR

爲什麼不寫上面：60 px; （如果你的頭是60像素...）檢查這個：https：//jsfiddle.net/nk64k09q/1/ –

啊，是的。但是如果我滾動下來，我的側邊欄會超過我的標題。 ;） – TLR

帶有可變頁面內容的邊欄高度

回答

相關問題