html - 具有可变页面内容的侧边栏高度

Question

在 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

有没有人有建议来完成我的侧边栏？提前致谢!

Answer 1

给侧边栏 100% 的高度或者设置一些高度