机身内的元素不适合机身

HTML:

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

CSS：

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

如果有这样的代码，
我认为头部的宽度和身体的宽度是一样的。

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

在该代码中，.header的宽度大于body
但不要修复类似".header｛width:1000px；｝"的css代码
因为我正在制作响应式网络。请使用%。

使用固定值定位标头，将使其忽略其父位置和维度。它将始终显示在屏幕上，在您将指定的固定位置（上/左/下/右）和您将给它的尺寸。

因此，你不能让你的头部跟随身体，只有给定的100%宽度和固定的位置。实际上，这完全取决于你想做什么。你想让页眉固定在屏幕上吗？是否也希望页眉为全宽？你说的是响应能力和100%，但你的身体宽度也是1100像素。

因此，考虑到这一点，你可以尝试下面这样的方法，这将使你对页面最大宽度的要求保持在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 ;
}

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

position: relative;

你也可以改变你的图像风格

margin-top: 50px;

至

padding-top: 50px;

如果你不喜欢页边空白顶部的移动方式，则将整个机身向下移动50像素

你自己说了答案，你必须使用百分比而不是固定的大小，把你的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 ; }

相关内容

最新更新

热门标签：