如何使一个div填充所有水平空间

Question

我是html和css的新手，当我创建一个用于训练的页面时，我做了一个div来填充顶部的水平空间。

然而，我没有成功做到这一点，我不知道为什么，我尝试调整边距，填充，在互联网上环顾四周，没有找到适合我的情况的解决方案。我想知道是否可以只用一个div 填充所有水平空间。

以下是我的代码当前的外观：

@charset "UTF-8";	
@import url('https://fonts.googleapis.com/css?family=Orbitron');
body{
  background-color: green;
  color: green;
  font-family: 'Orbitron', sans-serif;
  overflow-x: hidden;
}
div#page{
  width: 900px;
  height: 900px;
  background-color: black;
  box-shadow: 1px 1px 500px rgb(0,0,0);
  padding: 10px;
  margin: 0px auto 0px auto;
}
div#pageHead {
    width: 102%;
    background-color: rgb(20,20,20);
    height: 70px;
    position: relative;
    margin: -8px 0px auto 0px;
}

<div id="pageHead">		
  <header></header>
</div>
<div id="page">
  <header>
    this is a test
  </header>
</div>

Answer 1

只需将margin:0应用于body标签即可。您正在从正文中获取默认边距。

body{
    background-color: green;
    color: green;
    font-family: 'Orbitron', sans-serif;
    overflow-x: hidden;    
    margin:0;
}
div#page{
    width: 900px;
    height: 900px;
    background-color: black;
    box-shadow: 1px 1px 500px rgb(0,0,0);
    padding: 10px;
    margin: 0px auto 0px auto;
}
div#pageHead {
    width: 102%;
    background-color: rgb(20,20,20);
    height: 70px;
    position: relative;
    margin: -8px 0px auto 0px;
}

<div id="pageHead">     
        <header></header>
    </div>
    <div id="page">
            this is a test  
    </div>

Answer 2

试试这个body{ margin ：0; background-color： green;color： green; font-family： 'Orbitron'， sans-serif; overflow-x： hidden;}

Answer 3

默认情况下，div 会占用尽可能多的水平空间。因此，它通常与其父元素一样宽。

据我了解您的问题，您错过了两侧的最后几个像素。这不是div 的问题，而是 body 元素的问题。body 元素具有默认边距。

因此，您必须将正文边距设置为 0(零(。然后，您可以不指定div 的宽度或为div 指定 100% 的宽度。然后div 应该占据网页的整个水平空间。

Answer 4

第一个问题，您的页面div 无效(从未打开的封闭标签(。

对于宽度，添加

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

以重置浏览器样式。

https://jsfiddle.net/dtz5h9yh/3/

    @charset "UTF-8";   
    @import url('https://fonts.googleapis.com/css?family=Orbitron');
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body{
        background-color: green;
        color: green;
        font-family: 'Orbitron', sans-serif;
        overflow-x: hidden;
    }
    div#page{
        width: 900px;
        height: 900px;
        background-color: black;
        box-shadow: 1px 1px 500px rgb(0,0,0);
        padding: 10px;
        margin: 0px auto 0px auto;
    }
    div#pageHead {
        width: 102%;
        background-color: rgb(20,20,20);
        height: 70px;
        position: relative;
        margin: 0;
    }

        <div id="pageHead">     
            <header></header>
        </div>
        <div id="page">
            <header>            
                this is a test
            </header>
        </div>
    

Answer 5

将其添加到您的 CSS 中：

*{
    margin:0;
    padding:0;
}
div#page{
    width:100%;
}

同时使用id"页面"从div中删除</header>。希望这有帮助