그래서 콘텐츠 (오렌지 컨테이너)를 추가 시도 할 수는 파란색 컨테이너 떨어져 바닥에 충실 (당신이 오렌지 컨테이너에 position: absolute
, 또는 margin-top
을 사용할 수 있습니다 HTML 구조의 따라 다름) .
주황색 컨테이너 안에 헤더 (녹색) 컨테이너를 넣고 절대 상단 -100 % 위치에 놓을 수 있습니다 (주황색 위치는 absolute
또는 relatve
이어야합니다).
html을 추가하면보다 정확한 해결책을 찾기 쉽습니다.
JSFIDDLE with an example
CSS :
.box{
background: #f00;
height: 150px;
width: 100%;
position: relative;
padding: 20px;
padding-bottom: 0;
}
.column{
background: #0f0;
width: 30%;
position: relative;
top: 100%
}
.header{
position: absolute;
bottom: 100%;
width: 100%;
background: #00f;
}
HTML :이 솔루션을
<div class="box">
<div class="column">
<div class="header">
header
</div>
aaaaaaa<br/>
aaaaaa
</div>
</div>
헤더 크기가 미리 또는 그 헤더의 콘텐츠의 길이는 의존과 정렬? –