Question

简单地说，我希望网站的主体在1024x768显示器中占据100％的浏览器，并且对于具有更高分辨率（1024x768和更高）的显示器来显示中间的主体（中心对齐），留下相等的空间在左边和右边。

这在许多网站中很常见，但我不知道如何实现它。任何人都可以告诉我如何，并完成我开始的CSS代码？非常感谢你。

HTML

   <div class="header">content</div>
   <div class="side-bar">content</div>
   <div class="container">content</div>

CSS

       html body{ 
       margin:0;
       background:#fff;      
       }
      .container{float:left}
      .side-bar{float:left}

Answer 1

“今天，大多数访问者使用的屏幕分辨率高于1024x768像素” - http://www.w3schools.com/browsers/browsers_display.asp

因此，如果您需要一个1024像素宽的网站，您只需将容器设置为1024像素的脂肪:)和margin：auto;

http://jsfiddle.net/kx2nE/3/

我使用的是较小的一个，所以你可以在jsfiddle中看到更好的结果，但你可以在你的CSS中替换这些值。

#container
{
  width:300px !important;
  height:500px !important;
  border:1px solid red;
  margin:auto;
}

<div id="container">
    container with equal margins on window resize<br />
    <br /><br /><br />

    <b>
    width and height values set to yours 1024x768
    </b>
</div>

Answer 2

查看Fluid 960网格系统 - http://www.designinfluences.com/fluid960gs/

它可以让您在水平网格中很好地组织内容div，占用浏览器宽度的100％。

Answer 3

通常，由于您实际上没有出现问题，因此不鼓励此类问题出现堆栈溢出。然而，有一个非常好的css编码器为你解决了这个问题。这是下载的链接供您试用。

http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm

Answer 4

在1024个显示器上将宽度设置为固定大小的百分比和最小宽度：

#main {
width: 95%;
min-width: 990px; /* I suggest a number around 990, due to scroll bar width, experiment at will or use javascript to apply dynamically */

要使网站居中对齐，请使用自动水平边距：

margin: 0 auto;
}

注意：您需要将这些应用于身体正下方的div（身体本身不能改变大小）

<body>
<div id=main>
<div class="header">content</div>
<div class="side-bar">content</div>
<div class="container">content</div>
</div>
</body>

编辑：啊我明白你的意思，最大宽度的液体，大多数前面提到的支架，改变95％到100％，从最小到最大：

#main {
width: 100%;
max-width: 990px;
margin: 0 auto;
}

如何实现流体设计以适应1024x768尺寸的显示器或更高？

4 个答案: