gpt4 book ai didi

html - body 内的元素不适合 body

转载 作者:行者123 更新时间:2023-11-28 09:34:39 24 4
gpt4 key购买 nike

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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com