나는이 레이아웃에 CSS가 정말 붙어 있습니다. 여기 내 html 코드입니다 :세 열 100 % 높이 CSS 레이아웃
<body>
<div id="main">
<div id="left">
menu
</div>
<div id="middle">
</div>
<div id="right">
sidebar
</div>
</div>
</body>
내가 세 개의 열이 25 %, 60 %의 폭, 중앙과 오른쪽에서 왼쪽으로 원하고, 부모의 15 % 퍼센트의 폭과 모두의 100 % 높이로 확장 그들의 부모 (주). 내가 메인 div에 브라우저 창의 최소 높이와 하위의 최대 높이를 갖길 원합니다.
쉽게 CSS 테이블 사용하여 수행 할 수 있습니다
html, body {
height: 100%;
}
body {
margin: 0;
}
.main {
display: table;
height: 100%;
width: 100%;
}
.left, .middle, .right {
display: table-cell;
background-color: lightgray;
}
.left {
width: 25%;
}
.middle {
background-color: beige;
}
.right {
width: 15%;
}
참조 데모에서 : http://jsfiddle.net/audetwebdesign/9L8wJ/
뷰 포트의 높이를 채우려면을 먼저 HTML과 신체 요소 height: 100%을 설정해야 .
부모 컨테이너에 height: 100%을 적용하고이 값을 테이블로 설정하면이 값은 최소값으로 작용하므로 내용이 매우 길지 않은 경우이 값이 수직 화면을 채 웁니다.이 경우에는 표 높이가 콘텐츠를 포함하도록 자동으로 증가합니다.
너비를 왼쪽 및 오른쪽 열에 추가하면 가운데가 나머지를 채울 것이므로 수학을 수행 할 필요가 없습니다.
마지막으로 세 자식 요소에 display: table-cell을 적용하십시오.
각 테이블 셀의 내용 주위에 래퍼를 추가하는 것이 좋지만 열 사이의 공백을보다 잘 제어하려면 레이아웃과 디자인에 따라 다릅니다.