HTML 宽度 100% 超出页面

Question

我是 HTML 和 CSS 的新手。所以，我遇到了width100%的问题。它似乎超出了浏览器的边界。请看下面的例子！我应该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

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