Question

我在html中创建了一个带有图像和文本的div，我在css中添加了100％的div宽度，我还添加了背景颜色但由于某种原因div不是浏览器的100％我看不出我做错了什么。

#container {
  padding: 0;
  margin: 0;
}
#pic {
  padding-left: 450px;
  padding-top: 40px;
  position: absolute;
}
#about {
  background-image: url(background.jpg);
  padding-left: 50px;
  padding-top: 150px;
  padding-bottom: 20px;
  text-align: center;
  padding-right: 100px;
  line-height: 2.5;
  width: 100%;
}

<div id="container">

  <div id="pic">

    <img class="errorimage" src="IMG_4847.png" alt="" title="">

  </div>

  <div id="about">


    <h1 class="name">Rebekah</h1>


    <h2 class="name2">Web Desgin. Google Adwords. Google Analytics.</h2>


  </div>

Answer 1

它不是100％的原因是因为div正在运行#about div的填充。如果你删除左右填充，它将解决问题。

html, body {
  margin: 0;
  padding: 0;
}    

#about {
  background-image: url(background.jpg);
  padding-top: 150px;
  padding-bottom: 20px;
  text-align: center;
  line-height: 2.5;
  width: 100%;
}

这是fiddle

Answer 2

使用以下CSS：

html, body{
  margin:0;
  padding:0;
}

#pic img{
  padding-top: 40px;
  width:100%;
  display:inline-block;
}

我在演示中提取了一些代码，以便更清楚地向您展示。这是DEMO

你很亲密。宽度到100％需要在实际的img中。并且html和正文边距和填充需要重置，因为本身已经有一些填充已经为你

Answer 3

你的div不占用100％的浏览器，因为它占用了100％的父元素.. #container。您可以通过将此规则添加到您的父元素#container

来解决此问题

#container{
    width: 100%;
    height: 100%; //this is if you really wish to make your div to fully take 100% of browser
}

虽然#container在这种情况下会占用100％的父元素..所以你必须检查向上的父母是否有你希望达到的大小

Answer 4

我将背景图片直接放到了html（比身体更好，因为它总是至少是浏览器窗口的高度）

＆＃13;

html{
  margin:0;
  padding:0;
  background: url('http://www.cats.org.uk/uploads/branches/211/5507692-cat-m.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.container{
  width: 100%;
  height: atuo;
}

#about{
  padding-top: 100px;
  text-align: center;
  color: lightblue;
}

＆＃13;

<div id="container">
    <div id ="about">
      <h1 class ="name">Rebekah</h1>
      <h2 class ="name2">Web Desgin. Google Adwords. Google Analytics.</h2>
    </div>
</div>

＆＃13;

Answer 5

不确定你的结果是什么，但现在有了整页宽度 - *在左右删除大量填充后，因为浏览器添加 padding-left 和 padding-right 值为宽度，因此 width：100％ with padding-left：450px`表示计算机总宽度为100％+ 450px ..屏幕宽度为1200px，这意味着总宽度将是1650px而不是1200px。

＆＃xA;＆＃xA;

所以从CSS中删除这些行：

＆＃xA;＆＃xA ;

  #pic {＆＃xA; padding-left：450px; / *删除* /＆＃xA; / *****＆＃xA; #about {＆＃xA; padding-left：50px; / *删除* /＆＃xA; padding-right：100px / * remove * /＆＃xA;

＆＃xA;＆＃xA;

如果你想给图像是一个绝对位置然后你用 top：， left：， right：或 bottom： not来定位它填充和边距

＆＃xA;＆＃xA;

CodePen

＆＃xA;＆＃xA;

＆＃xD ;＆＃xA;

＆＃xD;＆＃xA;

  html，body {＆＃的xD;＆＃XA;保证金：0;＆＃xD;＆＃xA; padding：0;＆＃xD;＆＃xA;}＆＃xD;＆＃xA; #container {＆＃xD;＆＃xA; padding：0;＆＃xD;＆＃xA;保证金：0;＆＃xD;＆＃xA;宽度：100％;＆＃xD;＆＃xA;大纲：1px skyblue solid;＆＃xD;＆＃xA;}＆＃xD;＆＃xA; #pic {＆＃xD;＆＃xA; padding：0;＆＃xD;＆＃xA;宽度：100％;＆＃xD;＆＃xA; padding-top：40px;＆＃xD;＆＃xA; position：relative;＆＃xD;＆＃xA;}＆＃xD;＆＃xA; #pic img {＆＃xD;＆＃xA;宽度：100％;＆＃xD;＆＃xA;}＆＃xD;＆＃xA; #about {＆＃xD;＆＃xA; background-image：url（background.jpg）;＆＃xD;＆＃xA; padding-top：150px;＆＃xD;＆＃xA; padding-bottom：20px;＆＃xD;＆＃xA; text-align：center;＆＃xD;＆＃xA; line-height：2.5;＆＃xD;＆＃xA; width：100％;＆＃xD;＆＃xA;}

＆＃xD;＆＃xA;

 ＆lt; div id =“container”＆gt;＆＃xD;＆＃xA; ＆lt; div id =“pic”＆gt;＆＃xD;＆＃xA; ＆lt; img class =“errorimage”src =“// placehold.it/1000x300/00ff00/ffffff?text=banner"alt =”“title =”“＆gt;＆＃xD;＆＃xA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA; ＆lt; div id =“about”＆gt;＆＃xD;＆＃xA; ＆lt; h1 class =“name”＆gt; Rebekah＆lt; / h1＆gt;＆＃xD;＆＃xA; ＆lt; h2 class =“name2”＆gt;网页设计。谷歌广告关键词。 Google Analytics。＆lt; / h2＆gt;＆＃xD;＆＃xA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA;＆LT; / DIV＆GT;

＆＃的xD;＆＃XA;

 ＆＃的xD;＆＃XA; ＆＃XA;

如何让我的div成为100％的浏览器？

5 个答案: