我知道这里有一些问题涵盖了我的部分问题，但我无法将它们放在一起以使我的布局有效。
所以基本上我想要一个带有固定边栏和动态内容的两列布局来填充剩余空间。
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 我遇到的问题是我的内容没有占用剩余空间，如果我删除 float ，我会得到一个垂直滚动条，因为顶部有边距!
关于如何在没有滚动条的情况下实现 100% 高度(没有 overflow hidden ，因为这不会删除顶部的边距)和动态内容宽度的任何建议？
提前致谢
编辑:
具有讽刺意味的是，它适用于 jsfiddle
最佳答案
.container {
width: 100%;
background: fuchsia;
}
.left {
width: 200px;
float: left;
background: purple;
min-height: 300px;
}
并对容器应用了 clearfix。
关于Html，正文 100% 高度和内容的动态宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18636233/