Question

请查看example website。如果我很好地阅读了代码（只是有一个视线）它的设置与一些javascript的表，以便一个居中的容器可以始终保持在中心，并且身体有两个流体颜色背景，根据屏幕大小扩展。 / p>

我试图重现这样的东西，但只是使用CSS，我很确定我可以，但无法弄清楚如何。请你给我一些指示/文件来阅读。

Answer 1

<强> i have designed a simple structure here in Jsfiddle,have a look

<强> MARK-UP ::

<div class="wrapper">
   <div class="head_wrapper">
      <div class="left_head">left</div>
      <div class="right_head">right</div>
  </div>
 <div class="body_wrapper">
      <div class="left_body">left</div>
      <div class="right_body">right</div>
 </div>
</div>

CSS ::

.wrapper{
overflow:hidden;
width:100%;
display:table;
}
.head_wrapper,.body_wrapper{
overflow:hidden;
width:100%;
padding:0px;
display:table-row;
}
.left_head,.left_body,.right_head,.right_body{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.left_head{
background:black;
height:300px;
font-size:36px;
color:white;
}
.right_head{
background:blue;
height:300px;
font-size:36px;
}
.left_body{
 background:yellow;
height:800px;
font-size:36px;
}
.right_body{
background:green;
height:800px;
font-size:36px;
}
.left_head,.left_body{
width:70%;
overflow:hidden;
}

Answer 2

您只是要求在固定宽度的容器上进行水平居中。这很容易在CSS中完成。只需为您的容器（包裹整个网站的元素）设置：

.container {
    width: 800px;
    margin: 0 auto;
}

“自动”将自动均匀左右边距（顶部和底部没有边距。）

[编辑：哎呀忘了一点]

对于颜色块，您可以通过元素上的背景图像实现此目的，即1px宽，无论您需要多高。只需将其设置为repeat-x。

如果你的两个部分有可能有不同的高度，你可以分解它，以便：

一个容器是全宽的，并且具有背景颜色。然后内部容器将是固定宽度，具有如上所述的自动边距;
另一个容器是全宽的，背景颜色较浅。然后，内部容器将固定宽度，并带有如上所述的自动边距。

这意味着您的代码将类似于：

<div class="headercontainer">
    <div class="header> This is my header </div>
</div>
<div class="maincontainer">
    <div class="main"> This is rest of my copy. </div>
</div>

你的CSS：

.headercontainer { background-color: #222; }
.maincontainer { background-color: #444; }
.headercontainer .header, 
.maincontainer .main { width: 800px;
    margin: 0 auto; }

HTH：）

将容器置于弹性背景环境中

2 个答案: