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

有没有人有完成我的侧边栏的建议？ Thanx提前！

Answer 1

将侧边栏的高度设为100％或设置一些高度

Answer 2

所以，如果你的侧边栏父div有位置Fixed和top：0和bottom：0，它会从上到下，这样：

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

请检查：https://jsfiddle.net/nk64k09q/

Answer 3

我使用这个CSS解决了我的问题：

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

这对我有用。大家，谢谢你的帮助！

带有可变页面内容的侧边栏高度

3 个答案: