Question

我在下面的代码中遇到了奇怪的情况，我的body宽度设置为980px，我的标题和内容宽度设置为100%所以它们应该在整个屏幕上展开但是在firefox中，它们只有几个像素，而在chrome中它们只到达了一半，奇怪的是页面正在覆盖整个屏幕我通过设置background:black body来检查它，整个页面变黑了那么标题和内容如何与width:100%无关。但是这个代码在cssdesk cssdesk上工作得很好，所以我的浏览器出了什么问题。我的屏幕分辨率是1366x768。

body {
    width: 980px;
    margin: 0;
    background-color: #000;
}
.header {
    color: #fff;
    margin: 0;
    width: 100%;
    height: 60px;
    background-color: #F23F21;
}
#container {
    width: 100%;
}
.one {
    height: 200px;
    float: left;
    border: 1px solid red;
    width: 25%;
    box-sizing: border-box;
}
.two {
    height: 200px;
    display: inline-block;
    border: 1px solid blue;
    box-sizing: border-box;
    width: 50%;
}
.three {
    height: 200px;
    float: right;
    border: 1px solid green;
    box-sizing: border-box;
    width: 25%;
}

<body>
  <div class="header">This is header</div>
  <div id="container">
    <div class="one">
    </div>
    <div class="two">
    </div>
    <div class="three">
    </div>
  </div>
</body>

Answer 1

身体没有伸展以填满屏幕。关于如何在body元素上处理背景颜色的特殊规则（它用于为视口本身着色）。

身体是你给它的宽度。该宽度比浏览器窗口窄。

其他一切都受到限制。

Answer 2

不要修复身体的宽度，在体内创建一个容器div

我修改了你的代码检查这个

<style>
    body{}
    .container{
    width:980px;
    margin: 0;
    background-color: #000;
}
.header{
  color:#fff;
  margin: 0;
	width:100%;
  height: 60px;
  background-color:#F23F21;
}
#container{
    width:100%;
}
.one{
    height:200px;
    float:left;
    border:1px solid red;
    width:25%;
    box-sizing: border-box;
}
.two{
    height:200px;
    display:inline-block;
    border:1px solid blue;
    box-sizing: border-box;
    width:50%;
}
.three{
    height:200px;
    float:right;
    border:1px solid green;
    box-sizing: border-box;
    width:25%;
}

</style>
<body>
    <div class="container">
  <div class="header">This is header</div> 
<div id="container">
<div class="one">
</div>
<div class="two">
</div>
<div class="three"> 
</div>
</div>
  </div>
</body>

为什么标题和内容不符合正文宽度

2 个答案: