Question

我在学习CSS时写了一个示例页面。但我发现div个body内容溢出footer，而div高于body { background-color: white; } #div1 { margin: 50px; text-align: justify; width: 40%; position: absolute; left: 150px; top: 400px; } #div2 { margin: 50px; width: 35%; position: absolute; left: 800px; top: 400px; } #div3 { position: relative; width: 100%; height: 200px; top: 500px; background-color: black; color: white; } footer { background-color: black; color: white; width: 100%; position: absolute; bottom: 0; overflow: hidden; }。

<div id="div1">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
  </p>
  <h1 id="head2"><b>What I can help you with:</b></h1>
  <p>
If you’re a company or an agency that cares about creating great user experiences and are looking for someone to help you build a fast, accessible and standards-compliant responsive web site or application, I can help
  </p>
</div>
<div id="div2">
  <h3>TESTIMONIAL</h3>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
  </p>
</div>
<footer>
  <div id="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ip</div>
</footer>

div2

问题是div3和footer溢出div，整个页面变得丑陋。当我通过chrome中的inspect元素检查时，这些body的内容在{{1}}之外。

Answer 1

您到处都在使用position:absolute，而且您并不需要它。相反，请使用inline-block。

＆＃13;

body {
  background-color: white;
  margin: 0;
}
.div {
  margin: 5%;
  display: inline-block;
  vertical-align: top
}
.w40 {
  text-align: justify;
  width: 40%
}
.w35 {
  width: 35%
}
 {} footer {
  background-color: black;
  color: white;
  width: 100%;
}

＆＃13;

<div class="div w40">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
  </p>
  <h1 id="head2"><strong>What I can help you with:</strong></h1>
  <ul>
    <li>Lorem Ipsum is simply dummy text of th</li>
    <li>Lorem Ipsum is simply dummy text of th</li>
    <li>Lorem Ipsum is simply dummy text of th</li>
  </ul>
</div>
<div class="div w35">
  <h3>TESTIMONIAL</h3>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
  </p>
</div>
<footer>
  <div id="left">Lorem Ipsum is simply dummy text of the printing and typesetting
  </div>
</footer>

＆＃13;

Answer 2

这是因为你没有绝对的位置，因为你没有#div4，所以没有更多的亲戚。 Div是默认的块，如果删除它们的position属性，它们应该正常换行。

如果你想隐藏整个页面，你应该把溢出物放在身体上。

Answer 3

我不是100％肯定你在尝试什么，但是你正在滥用绝对的位置。你真的要小心如何使用它，因为当你使用绝对位置时，它会从文档的高度和宽度中消失。您最有可能想要使用float: left，但这有时也很棘手。如果你去移动设备，这将不会以相同的方式行事。

CSS花费大量时间并计划确保您做正确的事情。请查看下面的内容，看看提供的代码是否有用。

我将float: left添加到#div1, #div2

html{
  height: 100%:
    width: 100%;
}
body{
    background-color: white;
      height: 100%;
      width: 100%;
    }


    #div1{
                margin: 50px;
        text-align: justify;
        width:40%;
      float: left;
    }

    #div2{
                margin: 50px;
                width:35%;
      float: left;
    }


    footer{
    background-color: black;
    color: white;
    width: 100%;
    position: absolute;
    bottom: 0;
    overflow: hidden;
}

<div id="div1">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was 
</p>
<h1 id="head2"><b>What I can help you with:</b></h1>
<p>
<ul>
    <li>Lorem Ipsum is simply dummy text of th</li>
    <li>Lorem Ipsum is simply dummy text of th</li>
    <li>Lorem Ipsum is simply dummy text of th</li>
</ul>
</p>
</div>
<div id="div2">
<h3>TESTIMONIAL</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
</p>
</div>
<footer>
    <div id="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ip</div>
</footer>

为了防止一些页脚搞乱，我还将height: 100%和width: 100%添加到body和html中，但这可能不是您想要使用的内容。只需测试并确保它按您想象的方式运作。

Answer 4

这是因为您使用position:absolute top:400px并且它低于身高（它甚至没有适当的高度，因为那里有静态元素）。在您的示例中，如果您只是从所有元素（div和页脚）中删除position:absolute，它将看起来很好。您可以使用margin-left代替left进行定位;

内容溢出的身体在html / css中

4 个答案: