Question

HTML：

<body>
<header>
    <div>
    </div>
</header>
</body>

CSS：

body { width : 1000px ; }
header { width : 100% ; }

如果有这样的代码，
我认为标题的宽度与身体的宽度相同。

但它并没有像我的想法那样奏效以下是代码：http://jsfiddle.net/o3omng/q4xewdew/

在该代码中，.header的宽度大于body 但是不要修复css代码，例如＆＃34; .header {width：1000px; }＆＃34;
因为我正在制作响应式网络。请使用％。

Answer 1

尝试将标题位置设置为相对

position: relative;

您还可以更改图像样式

margin-top: 50px;

到

padding-top: 50px;

如果你不喜欢边缘顶部移动如何将整个身体向下移动50px

Answer 2

你自己说的答案，你必须使用百分比而不是修复大小，改变你的CSS，它会起作用：

* { margin : 0px ;
    padding : 0px ; }

body { background : #f8f8f8 ;
       height : 2000px ;
       width : 100%;
       margin : 0 auto ;}

.header { position : fixed ;
          border-bottom : 1px solid #f1f1f1 ;
          width : 100% ; background:#fc0; width:100%;}
.header img { display : block ;
              margin-left : auto ;
              margin-right : auto ;
              margin-top : 50px ;
              margin-bottom : 50px ; }

Answer 3

使用固定值定位标题，将使其忽略其父位置和尺寸。它将始终显示在屏幕上，您将指定的固定位置（顶部/左侧/底部/右侧）和您将给出的尺寸。

所以你不能让你的标题跟随身体只有100％的宽度和固定的位置。实际上这完全取决于你想做什么。您是否希望标题处于固定位置，始终在屏幕中可见？你还希望标题是全宽的吗？你说的是响应性和大约100％，但你的身体宽度也是1100px。

因此，考虑到这一点，您可以尝试下面的内容，这将使您对页面最大宽度的要求保持在1100px，并且还会将标题定位在固定位置的中心并响应。

body {
    background : #f8f8f8 ;
    height : 2000px ;
    width: 100%;
    max-width:1100px;
    margin:0 auto;
    box-sizing:border-box;
    position:relative;
}

.header {
    position : fixed ;
    border-bottom : 1px solid #f1f1f1 ;
    width : 100% ;
    max-width:1100px;
    background:#ddd;
}
.header img {
    display : block ;
    margin-left : auto ;
    margin-right : auto ;
    margin-top : 50px ;
    margin-bottom : 50px ;
}

身体内部的元素不适合身体

3 个答案: