CSS:侧面导航没有高度

Question

我在左侧和右侧网站上显示了一些内容。内容具有网站的完整宽度，而我的导航没有，我不明白为什么。

顶部栏/侧面导航:

#topbar {
background-color: rgb(51,51,51);
width: 20%;
position: absolute;
top: 0;
bottom: 0;
height:100%;
}

内容风格:

.wrapper {
width:700px;
height:500px;
margin:0 auto;
background:#f7f7f7;
position:relative;
left:50%;
}

我为这个内容使用了一个包装器，因为我总是希望它在导航旁边

我感谢每一个帮助和评论!

Answer 1

您可以设置两列来控制所有页面，并为每列设置不同的背景并设置最小高度:

.wrapper {
  padding: 0px 0px 20px 0px;
  min-height: 600px;
}
#topnav {
  background: #F5F5F5;
}
#content .col-lg-9 {
  min-height: 610px;
  background: white;
}
#content .col-lg-3 {
  background: #F5F5F5;
}

最后一段代码覆盖了你的侧边导航并确保它的高度始终为 100% 并且与你的内容/包装器的高度相同