我想要一个固定的全高侧边栏，主要内容位于所述侧边栏右侧剩余空间的中心。
我很接近，但是在使用 Margin: 0 auto; 时，主要内容没有正确地位于包装器 div 的中心。 #content 的左边距明显大于左边。
请帮助我将主要内容 div 置于包装 div 中。
谢谢!
HTML
<body >
<div id="sidebar">
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<p> this is the sidebar, it's ok as it is</p>
</div>
<div id="wrapper">
<div id="content">
<ul>
This div needs to be cetnered in the #wrapper with auto margins.
</ul>
</div>
</div>
</body>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: black;
}
body {
padding: 0;
margin: 0;
}
#wrapper {
margin-left: 250px;
height: 100%;
width: 100%;
}
#content {
width: 900px;
height: 100%;
background-color: blue;
margin: 0 auto;
}
#sidebar {
width: 250px;
height: 100%;
float: left;
}
最佳答案
修复很简单。我将 #wrapper width:100% 更改为 max-width:100%。
更新的 CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: black;
}
body {
padding: 0;
margin: 0;
}
#wrapper {
margin-left: 250px;
height: 100%;
**max-width: 100%;**
}
#content {
width: 900px;
height: 100%;
background-color: blue;
margin: 0 auto;
}
#sidebar {
width: 250px;
height: 100%;
float: left;
}
关于html - 无法正确居中 div。 margin : 0 auto; not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27973774/