html - 在弹性背景环境中居中容器

Question

请您查看此示例网站。如果我很好地阅读了代码（只是看到了），它会使用带有一些 javascript 的表格进行设置，以便居中的容器可以始终保持在中心，并且主体有两个根据屏幕大小扩展的流体颜色背景。

我试图重现这样的东西，但只是使用 css，我很确定我可以但不知道如何。请您给我一些指示/文件以供阅读。

Answer 1

我在 Jsfiddle 中设计了一个简单的结构，看看

标记::

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

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

[编辑：哎呀忘了一点]

至于色块，您可以使用元素上的背景图像来实现这一点，它的宽度为 1 像素，无论您需要多高。只需将其设置为重复-x。

如果您的两个部分可能具有不同的高度，则可以将其拆分，以便：

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

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

<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 :)