有没有办法在 CSS 中获得 100% 的固定宽度？

Question

我正在努力使我的网站更具可扩展性，并希望我的所有 div 占据整个页面的宽度。如果没有，我希望它们都居中且 960 像素。问题是当我尝试 margin-left:auto, margin-right:auto; 时，实际上没有一个 div 居中。当我尝试将宽度设置为 100%，然后尝试调整窗口大小时，一切都变得古怪了。

这里是网站： http://eitanrosenberg.com/newsite/index.html

这是我的 CSS：

*
{
    margin:0;
    padding:0;
}

.everythang
{
    margin-left:auto;
    margin-right:auto;
}

.topbar
{
    background-color:#000;
    height:75px;
    margin-left:auto;
    margin-right:auto;
    position:fixed;
    width:100%;
    z-index:10;
}

.logo
{
    color:#FFF;
    float:left;
    font-family:HarabaraRegular,helvetica;
    font-size:45px;
    margin:15px auto 0 20px;
    padding-left:100px;
    position:relative;
    width:160px;
}

.navbar ul
{
    color:#FFF;
    display:inline;
    float:right;
    list-style-type:none;
    margin-right:25px;
    margin-top:15px;
    text-decoration:none;
}

.navbar ul li
{
    display:block;
    float:left;
    margin:15px auto 0 5px;
    padding-right:32px;
}

.navbar ul li a
{
    color:#FFF;
    font-family:HitchcockRegular, helvetica;
    font-size:25px;
    text-decoration:none;
}

.navbar ul li a:hover
{
    color:#0CF;
}

.white
{
    background-color:#F8F8F8;
    background-image:url(gradients/radialg_200.png);
    background-position:30% 0;
    background-repeat:no-repeat;
    height:300px;
    margin:0;
    padding:50px 0 0;
    width:960px;
}

.hello
{
    color:red;
    font-family:CoolveticaRegular, helvetica;
    font-size:50px;
    margin-left:auto;
    margin-right:auto;
    padding-top:50px;
    text-align:center;
}

.hello2
{
    color:red;
    font-family:CoolveticaRegular, helvetica;
    font-size:35px;
    margin-left:auto;
    margin-right:auto;
    padding-top:10px;
    text-align:center;
}

.hello3
{
    color:#0CF;
    font-family:CoolveticaRegular, helvetica;
    font-size:35px;
    margin-left:auto;
    margin-right:auto;
    padding-top:10px;
    text-align:center;
}

.orange
{
    background-color:#F93;
    background-image:url(gradients/radialg_400.png);
    background-position:30% 0;
    background-repeat:no-repeat;
    height:500px;
    margin:0;
    padding:50px 0 0;
    width:960px;
}

.workbar ul
{
    color:#FFF;
    float:left;
    line-height:25px;
    list-style-type:none;
    margin-left:100px;
    margin-right:25px;
    margin-top:100px;
    text-decoration:none;
}

.workbar ul li
{
    margin:2px auto 0 35px;
    padding-right:32px;
}

.workbar ul li a
{
    color:#FFF;
    font-family:helvetica;
    font-size:25px;
    font-style:bold;
    text-decoration:none;
}

.workbar ul li a:hover
{
    color:red;
}

.red
{
    background-color:red;
    background-image:url(gradients/radialg_400.png);
    background-position:30% 0;
    background-repeat:no-repeat;
    height:500px;
    margin:0;
    padding:50px 0 0;
    position:static;
    width:960px;
}

.red h2
{
    color:#FFF;
    font-family:Helvetica;
    font-size:45px;
    margin-left:100px;
    padding-top:40px;
}

.red ul
{
    color:#FFF;
    float:left;
    list-style-type:none;
    margin-left:100px;
    margin-right:25px;
    margin-top:15px;
    text-decoration:none;
}

.red ul li a
{
    color:#FFF;
    font-family:helvetica;
    font-size:20px;
    font-style:bold;
    text-decoration:none;
}

.faves img
{
    display:inline;
    float:left;
    height:50px;
    padding-top:15px;
    position:relative;
    width:50px;
}

.faves
{
    padding-top:25px;
}

.faves h2
{
    display:inline;
    float:left;
    margin-top:25px;
    padding-top:15px;
}

.lists
{
    margin-top:100px;
}

.list1
{
    float:left;
    width:320px;
}

.list2
{
    float:left;
    width:320px;
}

.list3
{
    width:320px;
}

.gray
{
    background-color:#2e3031;
    background-image:url(gradients/radialg_400.png);
    background-position:30% 0;
    background-repeat:no-repeat;
    height:700px;
    margin:0;
    padding:50px 0 0;
    position:static;
    width:960px;
}

.gray h2
{
    color:#FFF;
    font-family:Helvetica;
    font-size:45px;
    margin-left:100px;
    padding-top:40px;
}

.resumeImg img
{
    display:block;
    height:550px;
    margin-left:auto;
    margin-right:auto;
    width:900px;
}

Answer 1

使用margin 使元素居中需要元素具有布局。当使用margin-left 和margin-right 时，这将是width 属性。

另一种使元素居中的方法是：

position: absolute;
width: 800px;
left: 50%;
margin-left: -400px;

您会将元素从左侧移动 50%，然后向后移动 400 像素（宽度的一半）。这也适用于高度。

Answer 2

将您的包装器divs（“白色”、“橙色”等）设置为width: 100%;，并在其中包含您的内容（最好在另一个div 中，设置为width: 960px; margin: 0 auto;：

.white, .orange {
  width: 100%;
} 

.white-wrapper {
  width: 960px;
  margin: 0 auto;
}

并使用以下 HTML：

<div class="white">
  <div class="white-wrapper">
    -- content --
  </div>
</div>

这样，您的背景将适当地填充页面，并且您的内容将浮动在中心并在缩小页面时正常工作。我建议不要动态更改内容的宽度，因为它会带来可读性问题（而且看起来很恶心），但如果你真的想要，试试min-width：

.white {
  min-width: 960px;
}

这将确保您的 div 始终至少 960px 宽；

Answer 3

如果我正确理解您的问题，您需要一个 960 像素宽的固定居中布局，除非浏览器窗口小于 960 像素，否则您希望布局为全宽。

为此，请将整个 html 代码包装在一个容器中，如下所示：

<body>
  <div id="container">
    <!-- your code here -->
  </div>
</body>

并应用这个 css：

#container {margin:0 auto;max-width:960px;}

Internet Explorer 6 不理解最大宽度，因此如果您担心这个问题，您可以为 IE6 提供 960 像素的固定宽度：

#container {margin:0 auto;max-width:960px;}
* html #container {width:960px;} /* IE6 hack */

或者在 IE6 中使用更丑陋的 hack 来强制使用 max-width：

* html #container {width: expression(document.body.clientWidth > 962? "960px");