html/css의 내용이 넘치는 내용

Question

CSS를 읽는 동안 샘플 페이지를 작성했습니다. 하지만 내 의 콘텐츠 중 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의 내용은 크롬의 inspect 요소를 통해 확인하면 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는 기본적으로 블록이므로 위치 속성을 삭제하면 정상적으로 래핑해야합니다.

전체 페이지로 숨기려면 본문에 오버플로를 넣어야합니다.

Answer 3

나는 당신이 시도하고있는 무슨을 100 % 확신 해요,하지만 당신은 절대 위치에서 지옥을 남용하고 있습니다. 위치 절대 값을 사용할 때 문서의 높이와 너비에서 벗어나기 때문에 사용 방법을 신중히 알고 싶습니다. 대부분 float: left을 사용하고 싶지만 너무 까다로울 수 있습니다. 당신이 모바일에 간다면 이것은 예를 들어 같은 방식으로 행동하지 않을 것입니다.

CSS는 올바른 작업을 수행하는 데 많은 시간과 노력을 필요로합니다. 아래 코드를 확인하고 제공된 코드가 도움이되는지 확인하십시오.

내가 바닥 글의 일부는 엉망 방지하기 위해 #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>

에 float: left을 추가, 또한 신체와 HTML로 height: 100% 및 width: 100%을 추가, 그러나 이것은 당신이 원하는 것을하지 않을 수 있습니다 사용. 그냥 테스트하고 그것이 당신이 상상하는 방식으로 행동하는지 확인하십시오.

Answer 4

으로 position:absolute을 사용하고 신체 높이보다 낮아지며 (정적 요소가 있기 때문에 적절한 높이가 아님) 이러한 현상이 발생합니다. 예에서 모든 요소 (div 및 footer)에서 position:absolute 만 제거하면 잘 보일 것입니다. 위치 지정을 위해 left 대신 margin-left을 사용할 수 있습니다.