HTML:
<body>
<header>
<div>
</div>
</header>
</body>
CSS:
body { width : 1000px ; }
header { width : 100% ; }
如果有这样的代码，
我认为页眉的宽度将与主体的宽度相同。
但它并没有像我想的那样工作。
这是代码:http://jsfiddle.net/o3omng/q4xewdew/
在该代码中，.header 的宽度大于正文。
但不要修复像 ".header { width : 1000px ; }"
这样的 css 代码
因为我正在制作响应式网页。请使用 %。
最佳答案
用固定值定位表头，会使其忽略其父位置和尺寸。它将始终显示在屏幕上，显示在您指定的固定位置(上/左/下/右)和您指定的尺寸。
因此，您不能让页眉仅以给定的 100% 宽度和固定位置跟随主体。其实这完全取决于你想做什么。您是否希望标题位于固定位置，始终在屏幕上可见？您还希望页眉是全 Angular 的吗？你说的是响应式和大约 100%，但你的 body 宽度也为 1100 像素。
因此，考虑到这一点，您可以尝试类似下面的操作，这将使您对页面最大宽度的要求保持在 1100 像素，并且还将标题置于固定位置的中心并响应。
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 ;
}
关于html - body 内的元素不适合 body ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25589400/