1

简单地说，我希望网站的主体在 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}
4

4 回答 4

1

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

因此，如果您需要一个 1024 像素宽度的网站，您只需将容器设置为 1024 像素胖 :) 和边距：自动；

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>
于 2011-11-21T23:51:02.440 回答
0

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

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

于 2011-11-21T23:30:16.150 回答
0

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

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

于 2011-11-21T23:31:51.620 回答
0

在 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;
}

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

<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;
}
于 2011-11-21T23:40:01.833 回答