Question

第一个问题很抱歉，如果这有点夸张。

我试图获得一个完整的（100％）宽度固定标头，其中包含与主容器对齐的内容，例如徽标和导航链接。我不想在徽标/导航内容上左右使用边距，因为这看起来并不灵活。

我尝试将标题div放在容器块中，这样可以解决对齐问题，但是我无法再调整宽度。

那么基本上我如何获得全宽度固定标题中的内容以与页面主要内容中的内容保持一致？

这是我的HTML（对不起，如果它凌乱，我只在这一周左右）：

<body>
    <div id="header">
    <div id="logo">
    </div>
    <div id="nav">
    </div>
    </div>

    <div id="container">
        <div id="content">
        </div>
    </div>

    <div id="footer">
    </div>
</body>

这是我的CSS，我将徽标图像留下并且就位只是一个米色块：

body {
margin: 0px;
background-color: darkgray;
}

#header{
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}

#logo {
height: 100%;
width: 300px;
background-color: beige;
}

#container {
width: 960px;
margin: 0px auto;
height: 1000px;
background-color:gray;
}

#footer{
width: 100%;
height: 100px;
background-image: url("images/bg-header.jpg");
}

有什么建议吗？

感谢您

Answer 1

对于固定页眉或页脚，您可以使用

.header_class {
  width: 100vw;
  float: left;
  position: fixed !important;
  top: 0px;
  background: url: ('images/img.png') no-repeat;
  height: 100%;
}

另一个更好的建议你可以按照facebook标题css表示上蓝色部分css（css类名：.fixed_elem，.fixed_always）

Answer 2

在标题HTML中添加内包装

<body>
    <div id="header">
        <div id="header_inner"><!-- inner div -->

            <div id="logo">
            </div>
            <div id="nav">
            </div>

        </div><!-- end inner div-->
    </div>

    <div id="container">
        <div id="content">
        </div>
    </div>

    <div id="footer">
    </div>
</body>

然后将与容器相同的宽度样式添加到包装器中：

#header_inner{
    width: 960px;
    margin: 0px auto;
}

然后主要内容和标题内容将对齐。

一些旁注：

类总是比样式的ID更好
固定宽度通常不是一个好主意，如果你想要一个响应式解决方案

Answer 3

我很难理解你究竟想要做什么，所以我做了这个例子，它显示了一个带有标题的整页和一个包含在中间内容区域内的页面。我看到的主要问题是，当你做宽度：100％这样的事情时它不会100％被允许..但是父元素的全宽。您可以使用width：inherit来获取允许的最大宽度。以下是带有全白色标题宽度的示例，其中一个使用黑色。它是如何构建父子DOM关系结构的

<!doctype html>  
<html>  
<head>  
  <style>body {margin: 0px;background-color: darkgray;}  
         header{background-color: white;height:100px;width:100%;}
         #header{width: inherit;height: 100px;position: fixed;top: 0px;background-image:url("images/bg-header.jpg");opacity: 0.9;background-color: black;}
         #logo {height: 100%;width: 300px;background-color: beige;}
         #container {width: 960px;margin: 0px auto;height: 1000px;background-color:gray;}
         #footer{width: 100%;height: 100px;background-image: url("images/bg-header.jpg");}
</style>
</head>
<body>
  <header><div></div></header>
  <div id="container">
    <div id="header">
      <div id="logo"></div>
      <div id="nav"></div>
    </div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</body>
</html>

Answer 4

最简单的解决方案是在#header内添加容器。创建一个具有.container和此容器共享属性的类#container。还要确保#header内的容器达到100％高度。

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

#header .container {
  height: 100%;
}

body {
  margin: 0;
  background-color: darkgray;
}

#header {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  background-image: url("http://placehold.it/100x100");
  opacity: 0.9;
}

#logo {
  height: 100%;
  width: 300px;
  background-color: beige;
}

#container {
  height: 1000px;
  background-color: gray;
}

#footer {
  height: 100px;
  background-image: url("http://placehold.it/100x100");
}

.container {
  width: 960px;
  margin: 0 auto;
}

#header .container {
  height: 100%;
}

<div id="header">
  <div class="container">
    <div id="logo">
    </div>
    <div id="nav">
    </div>
  </div>
</div>

<div id="container" class="container">
  <div id="content">
  </div>
</div>

<div id="footer">
</div>

Answer 5

基本上你想要一个全宽100px的页眉和页脚，它们固定在前0和后0，但同时你希望内容不会在页眉和页脚下完全滚动。我希望我能理解这个问题。

要实现这一点，显然要将位置固定到页眉和页脚，但现在要使内容对齐，您必须给出页眉和页脚高度的余量（100px）

以下是代码段...我添加了不同颜色和一些填充内容以查看差异。

＆＃13;

body {
  margin: 0px;
  background-color: darkgray;
}
#header,
#footer {
  width: 100%;
  height: 100px;
  position: fixed;
  left: 0;
  background: blue;
  opacity: 0.5;
  text-align: center;
  color: red;
}
#header {
  top: 0;
}
#footer {
  bottom: 0;
}
#logo {
  height: 100%;
  width: 300px;
  background-color: beige;
  float: left;
}
#nav {
  height: 100%;
  width: 450px;
  background: cyan;
  opacity: 0.5;
  float: right;
}
#container {
  width: 960px;
  margin: 100px auto;
  height: 1000px;
  background-color: orange;
}

＆＃13;

<div id="header">
  <div id="logo">logo</div>
  <div id="nav">nav</div>
</div>
<div id="container">
  <div id="content">
    content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>
  </div>
</div>
<div id="footer">footer</div>

＆＃13;

希望这就是你要找的东西。

Answer 6

之前我曾多次遇到这个问题，你想要全宽图像，但是它们是固定宽度的容器。无论如何，你可以在这里做一些事情。您可以将容器类添加到容器中所需的每个部分;你把一个迷你容器放在想破坏规则的div中（这也需要从主#container中取出所说的div / #header）

#header {  
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}

将div放入该被调用的内容中，并将内容设置为这样。

.content {  
width: 960px;
margin:0 auto;
display:block;
}

所以你的标记/ html看起来应该是

<div id="header">
  <div class="content">
    <ul>
      <li><a>Home</a></li>
      <li><a>Other</a></li>
    </ul>
  </div>
</div>

还有更多选择，但这些似乎对此问题有意义。

希望这有助于， -Alex

将全宽固定标题与主要内容对齐？

6 个答案: