Question

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

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

以下是我的代码目前的样子：

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

第一个问题，您的页面div无效（永不打开的封闭标记）。

对于宽度，添加

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

重置浏览器样式。

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

＆＃13;

    @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;
    }

＆＃13;

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

＆＃13;

Answer 3

试试这个身体{margin：0;背景颜色：绿色;颜色：绿色; font-family：＆＃39; Orbitron＆＃39;，sans-serif; overflow-x：hidden;}

Answer 4

将此添加到您的CSS：

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

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

Answer 5

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

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

所以你必须将身体边距设置为0（零）。然后你可以不指定div的宽度或给div宽度100％。然后div应该占据网页的整个水平空间。

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

5 个答案: