상단 영역과 하단 영역이 포함 된 컨테이너가 있습니다. 상단 영역에는 (나중에) 동적 콘텐츠가 포함될 두 개의 추가 div가 있습니다. 하단은 절대 위치 div로, 상단 섹션에 포함 된 콘텐츠의 양에 관계없이 항상 하단에 위치해야하며 하단은 아래로 눌러야합니다. 어떤 이유에서인지 모르겠지만 실패합니다. 누군가 나를 도울 수 있습니까?
내 HTML은 다음과 같습니다.
<div class="container">
<div class="top">
<div class="left">
<h3>
some left header
</h3>
<p>
some left text
</p>
</div>
<div class="right">
<h3>
some right header
</h3>
<p>
some right text
</p>
<p>
some right text
</p>
</div>
</div>
<div class="bottom">
<p>
some bottom text
</p>
<p>
more bottom text
</p>
</div>
내 CSS :
.container {
position: relative;
border: 1px solid black;
min-height: 255px
}
.top {
display: flex;
border: 1px solid black;
}
.left {
float: left;
border: 1px solid red;
}
.right {
float: right;
border: 1px solid green;
}
.bottom {
position: absolute; // here the issue appears
bottom: 0; // here too
}
나는이 JSFiddle을 그것이 내가 무엇을 달성하고자하는 모습이나 방법
또한 절대 div 위치에 JSFiddle 이 있습니다 .
컨테이너에 값이 100vh 인 height 속성을 추가하는 것은 어떻습니까?
height: 100vh;
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다