Question

我是HTML和CSS的新手。所以，我有宽度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>

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

看一下这段代码：

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

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

width

Answer 3

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

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。

为name和navbar 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％的宽度，加上30px的填充。因此宽度是填充所创建空间的100％+ 30px。

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

Answer 9

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

HTML宽度100％超出页面范围

9 个答案: