创建一个具有流体面的页眉

Question

请参阅附件中的线框图。我正在使用blueprint css。我希望除了头之外的所有东西都在一个980px的容器中。

对于标题，我希望左边的列是流动的。总是越来越多地接触到浏览器的左侧。你怎么能构建一个容器，它的头部只有一面是流动的？

我希望线框图能帮助解释这个问题。如果没有，请告诉我。谢谢

​

​

Answer 1

我不确定我是否正确地理解了您的问题，但我认为唯一的方法就是使用容器和横幅区域的z索引。

例如，您的CSS将为：

body { margin: 0; }
#container { width:980px; margin: 0 auto; z-index: 1; background-color: black; height:500px; }
#logo { width:200px; height:50px; background-color: red; }
#header-left { position: absolute; top:0; left:0; height:50px; width:50%; z-index: 0; background-color: red; }

然后，对于您的HTML：

<div id="header-left"></div>
<div id="container">
    <div id="logo"></div>
</div>

希望这能有所帮助。

Answer 2

让我看看我是不是对的，你想让你的头总是在右上角和左上角，而不影响容器的位置吗？为什么不把页眉从容器中拿出来，确保正文页边距设置为0，这样页眉实际上完全位于文档的左上角，并使页眉具有绝对位置。

body {
    margin: 0px;
}

.header {
    width: 200px;
    position:absolute;
}
.container {
    width: 980px;
    margin:0 auto;
}

<body>
<div class="header"></div>
<div class="container"></div>
</body>