身体内的元素不适合身体
Posted
技术标签:
【中文标题】身体内的元素不适合身体【英文标题】：Element inside body doesn't fit in body 【发布时间】：2014-10-24 17:05:48 【问题描述】：html：
<body>
<header>
<div>
</div>
</header>
</body>
CSS：
body width : 1000px ;
header width : 100% ;
如果有这样的代码， 我认为标题的宽度将与正文的宽度相同。
但它并没有像我想的那样工作。 这是代码：http://jsfiddle.net/o3omng/q4xewdew/
在该代码中，.header 的宽度大于正文。 但不要修复像“.header width : 1000px; ”这样的css代码 因为我正在制作响应式网络。请使用 %。
【问题讨论】：
CSS Input with width: 100% goes outside parent's bound的可能重复 @JonathanLonowski 谢谢，我现在就读。 在您的示例中，标题的宽度为 501，正文的宽度为 1100（您的 css 此处不正确），因此标题的宽度已经小于正文。 【参考方案1】：使用固定值定位标题，它将使其忽略其父位置和尺寸。它将始终显示在屏幕上，在您指定的固定位置（上/左/下/右）以及您将为其指定的尺寸。
因此，您不能让标题跟随正文，仅具有给定的 100% 宽度和固定位置。其实这一切都取决于你想做什么。您是否希望标题处于固定位置，始终在屏幕上可见？您是否还希望标题是全角的？您说的是响应式和大约 100%，但您的身体宽度也为 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 ;
【讨论】：
【参考方案2】：尝试将标题位置设置为相对
position: relative;
你也可以改变你的图片风格
margin-top: 50px;
到
padding-top: 50px;
如果您不喜欢 margin-top 的移动方式，会将整个主体向下移动 50 像素
【讨论】：
【参考方案3】：你自己说了答案，你必须使用百分比而不是 fixef 大小，将你的 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 ;
【讨论】：
以上是关于身体内的元素不适合身体的主要内容，如果未能解决你的问题，请参考以下文章