HTML 宽度 100% 超出页面

Question

我是 HTML 和 CSS 的新手。所以，我对 100% 的 width 有疑问。它似乎超出了浏览器的边界。请看下面的例子！我应该稍微降低width 的百分比，还是我的代码中存在一些可能导致这种情况的缺陷？

我在这里找到了一些关于宽度 100% 的其他帖子，但它们都没有真正帮助我。这是我做的例子：http://jsfiddle.net/gj53jbz9/

---

 body{
              font-size: 15px;
              margin: 0px;
              background-color: lightgrey;  }

            #header{
              padding: 30px;
              width: 100%;
              height: 250px;
              background-color: grey;   }

            #name{
              padding: 5px;
              font-size: 25px;
              float: left;  }


            #navbar{
              float: right;
              text-align: right;    }

            #navbar a{
              background-color: black;
              display: inline-block;
              width: 120px;
              text-align: center;
              padding: 10px 0px;
              text-decoration: none;
              color: lightgrey; }

            #title{
              clear: both;
              text-align: center;
              padding-top: 100px;
              font-size: 45px;  }

            #content{
              text-align: center;
              width: 80%;
              margin: 0px auto;  }

   <div id=header>
            <div id=name>Name</div>
            <div id=navbar>
                <a href="page1.html">Link1</a>
                <a href="page2.html">Link2</a>
            </div>
            <div id=title>Insert title here</div>
        </div>
        <div id=content>
            <h3>Age of aggression</h3>
            <p>We drink to our youth, to days come and gone. For the age of aggression is just about done. We'll drive out the Stormcloaks and restore what we own. With our blood and our steel we will take back our home.</p>
            <p>Down with Ulfric! The killer of kings! On the day of your death we will drink and we'll sing. We're the children of Skyrim, and we fight all our lives. And when Sovngarde beckons, every one of us dies! But this land is ours and we'll see it wiped clean. Of the scourge that has sullied our hopes and our dreams!</p>
  </div>

Answer 1

那是因为您将宽度和填充都设置为一个元素。默认情况下，填充添加在宽度之上。 （使其为 100% + 2*30px 的宽度）。

#header{
  padding: 30px;
  width: 100%;
}

要么删除填充并将其添加到未设置宽度的内部元素，要么使用：

box-sizing: border-box;

这使得宽度计算包括填充。 :)

https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 2

如果您从 body {} 内的属性中删除 margin: 0px; 似乎可以工作 我不知道它为什么会有这种行为

Answer 3

看看你的这部分代码：

        #header{
          padding: 30px;
          width: 100%;
          height: 250px;
          background-color: grey;   }

这告诉浏览器#header 的width 应该是100%，并带有30px 的填充。由于填充不计入width，实际width 最终为100% + 60px。因此，为了确保它适合页面，您需要从 100% width 中减去 60px（左侧 30 像素 + 右侧 30 像素），它将适合浏览器。幸运的是，您可以使用 CSS 轻松做到这一点：

        #header{
          padding: 30px;
          width: calc(100% - 60px);
          height: 250px;
          background-color: grey;   }

Answer 4

每个 HTML 元素都有一些默认值。请在此处查看： https://www.w3schools.com/cssref/css_default_values.asp

您也可以尝试将所有元素的边距和内边距设置为 0。就像这样：

*{margin: 0; padding: 0}

Answer 5

默认情况下，HTML 元素仅根据内容计算其大小，因此不包括内边距、边框和边距。要改变这种行为，请使用：

box-sizing: border-box;

这使得计算包括填充和边框。你可以将它添加到任何你想要的元素中，但是将它添加到所有元素中是一种常见的做法：

* {
    box-sizing: border-box;
}

Answer 6

不要给标题 div 左右两边的内边距。

为名称和导航栏 div 添加一些边距

就这样

#header {
    padding: 30px 0px;
    width: 100%;
    height: 250px;
    background-color: grey;
}

#name {
    padding: 5px;
    font-size: 25px;
    float: left;
    margin-left: 40px;
}

#navbar {
    float: right;
    text-align: right;
    margin-right: 40px;
}

Answer 7

这是因为内边距的总和为宽度 100%。

尝试使用 box-sizing，就像这样：

#header{
    padding: 30px;
    width: 100%;
    height: 250px;
    background-color: grey; 
    box-sizing: border-box;
}

Answer 8

Header.Width=100% 和 Header.Padding=30px 导致问题。

您告诉浏览器标题将使用 100% 的宽度，加上 30 像素的填充。所以宽度是padding创建的空间的100%+30px。

尝试将宽度移动到 body 属性，以便所有页面都使用 100% 的可用空间。那应该可以解决它。

Answer 9

left: 0px;
right: 0px;
width: auto;
position: relative;