자식 div를 부모 div의 아래쪽에 수직으로 정렬하고 부모 높이의 백분율로 설정하려고합니다.
그러나 자식의 height : 20 % 속성이 무시되는 것 같고 div가 전체 100 %를 차지하도록 늘어납니다.
최종 목표는 전체 화면 제목 페이지 사진을 기사 소개로 사용하는 것입니다. 여기에는 기사 제목이있는 반투명 막대가 사진 하단을 따라 실행됩니다. 백분율을 사용하여 모든 크기의 화면에 반응 형 디자인을 만들고 있습니다.
JS 피들 : http://jsfiddle.net/A52fw/1/
HTML :
<body>
<div id="outerdiv">
<div id="innerdiv">
test
</div>
</div>
</body>
CSS :
html, body {
height: 100%;
width: 100%;
}
#outerdiv {
height: 100%;
width: 100%;
display: table;
}
#innerdiv {
width: 100%;
height: 20%;
background-color: red;
display: table-cell;
vertical-align: bottom;
}
표시 속성 대신 위치 지정 (상위 기준, 하위 기준 절대)을 사용합니다.
#outerdiv {
height: 100%;
width: 100%;
position:relative;
}
#innerdiv {
width: 100%;
height: 20%;
background-color: red;
position:absolute;
bottom:0;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다