Question

我想要一个固定的，全高的侧栏和主要内容，位于所述侧栏右侧的剩余空间中。

我很接近，但是当使用 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;
}

Answer 1

修复很简单。我将#wrapper宽度：100％更改为最大宽度：100％。

See the fixed fiddle here

更新了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;
}

无法正确居中。保证金：0自动;不工作

1 个答案: