我知道这里的问题涵盖了我的部分问题,但我无法将它们放在一起以使我的布局正常工作。
所以基本上我想要一个带有固定侧边栏和动态内容的两列布局来填充剩余空间。
HTML:
<body>
<div id="navbar">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</div>
<div id="content">
</div>
</body>
CSS:
html, body {
height:100%;
margin: 0;
padding: 0;
border: 0;
}
#content {
height:100%;
float:left;
/*margin: 0 0 0 200px;*/
}
#navbar{
height:100%;
width:200px;
float:left;
}
使用这个 CSS,我的问题是我的内容没有占用剩余的空间,如果我删除浮动,我会得到一个垂直滚动条,因为顶部有一个边距!
有什么建议我可以在没有滚动条的情况下实现 100% 高度(没有隐藏溢出,因为这不会删除顶部的边距)和动态内容宽度?
提前致谢
编辑:
具有讽刺意味的是,它适用于jsfiddle