Html 你如何在 CSS 中实现固定的左侧边栏和流畅的右侧内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3393025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you implement a fixed left sidebar and fluid right content in CSS
提问by kampit
回答by meder omuraliev
Set a margin and remove the float/width on #content, like so:
设置边距并删除 #content 上的浮动/宽度，如下所示：
HTML:
HTML：
<div id="wrapper">
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
</div>
CSS:
CSS：
#wrapper {
width:400px;
overflow:hidden;
padding:10px;
}
#sidebar {
float:left;
width:100px;
}
#content {
margin: 0 0 0 100px;
}
div {
border:1px solid #333;
}
回答by sdw3489
There is actually an even easier solution to this which i discovered not too long ago. Works well back to IE7. The #fluid div will slide up next to the fixed fix and take up the remaining space while maintaining great fluidity for all responsive sites. Dont need put a float or width on the fluid div at all.
实际上，我不久前发现了一个更简单的解决方案。工作良好回 IE7。#fluid div 将在固定修复旁边向上滑动并占用剩余空间，同时为所有响应站点保持良好的流动性。根本不需要在流体 div 上放置浮点数或宽度。
http://jsfiddle.net/HWMJc/874/
http://jsfiddle.net/HWMJc/874/
#sidebar {
float:left;
width:100px;
}
#content {
overflow:hidden;
}
回答by Mhd Wael Jazmati
You should set it to be:
您应该将其设置为：
sidebar{ width:100px; float: left}
回答by Alexander
Don't use 100% width on #content.
70% works, but there is a small gap between the two elements. You can adjust it to make it fit better though.
不要在#content 上使用 100% 宽度。
70% 有效，但两个元素之间有一个小的差距。您可以调整它以使其更适合。
