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