在 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
有没有人有建议来完成我的侧边栏?提前致谢!
最佳答案
给侧边栏 100% 的高度 或者设置一些高度
关于html - 具有可变页面内容的侧边栏高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36196282/