HTML宽度100％超出页面

我是HTML和CSS的新手。所以，我有一个宽度为100％的问题。它似乎超越了浏览器的边界。请看下面的例子！我应该减少每分钱的宽度一点还是有我的代码中可能会导致这种缺陷？HTML宽度100％超出页面

我在这里发现了一些关于宽度为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>

来源

2017-10-28 Lare Larsson

看来，如果你从属性中删除margin: 0px;内body {} 工作，我不知道为什么有这种行为

来源

2017-10-28 15:38:58

这是因为你有宽度和填充设置为一个元素。并且默认情况下，在宽度上添加填充。（使其100％+ 2 * 30px的宽度）。

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

要么除去填充，并将其与没有设定宽度，或使用添加到内部元件：

box-sizing: border-box;

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

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

来源

2017-10-28 15:39:23 vicbyte

每个HTML元素都有一些默认值。请点击这里： https://www.w3schools.com/cssref/css_default_values.asp

您也可以尝试设置所有元素的margin和padding为0。就这样：

*{margin: 0; padding: 0}

来源

2017-10-28 15:41:35

默认情况下，HTML元素计算仅基于内容的大小，所以不包括填充，边框和边距。要更改该行为，请使用：

box-sizing: border-box;

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

* { 
    box-sizing: border-box; 
}

来源

2017-10-28 15:42:51

请勿将左右填充为您的标题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; 
}

来源

2017-10-28 15:43:34

这是因为填充被相加的宽度100％。

尝试使用盒大小，像：

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

来源

2017-10-28 15:46:22

Header.Width = 100％和Header.Padding = 30像素是造成问题的原因。

您正在告诉浏览器头将使用宽度的100％，加上30px的垫。所以宽度是由填充创建的空间的100％+ 30px。

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

来源

2017-10-28 15:49:04

HTML宽度100％超出页面

回答

相关问题