Содержимое переполненного тела в html/css

Question

Я написал образец страницы во время изучения css. Но я обнаружил, что 2 из моих div s переполнены 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 s находится за пределами body, когда я проверяю элемент контроля в хроме.

Answer 1

Вы используете position:absolute всюду, и вам это не нужно. Вместо этого используйте, например, inline-block.

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%; 
 
}

<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>

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% к телу и HTML, но это может быть не то, что вы хотите использовать. Просто проверьте и убедитесь, что он действует так, как вы себе представляете.

Answer 4

Это происходит потому, что вы используете position:absolute с top:400px, и он опускается ниже высоты тела (он даже не имеет правильной высоты, потому что там есть статические элементы). В вашем примере, если вы просто удалите position:absolute со всех элементов (div и footer), это будет выглядеть просто отлично. Вы можете использовать margin-left вместо left для позиционирования;