0
이 레이아웃 문제가 있습니다. Header, foother 및 컨테이너가있는 레이아웃을 만들려고합니다. 컨테이너 내부에는 Left_bar, Right_bar, file_view 및 main_content라는 4 개의 div가 있습니다.컨테이너에 4 개의 열이있는 CSS 레이아웃 문제
머리글과 바닥 글은 고정 된 높이로 설정됩니다. 하지만 컨테이너가 최소 500px 높이가되고 필요하다면 높이 올리고 싶습니다. 컨테이너를 최소 높이로 설정하려고 시도했습니다. 500px 및 컨테이너 내부의 모든 div가 너무 높습니다. 100 %, 작동하지 않았습니다.
이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 기본적으로 컨테이너는 main_content div의 내용에 따라 높이를 변경해야합니다. 컨테이너의 다른 div는 모두 같은 높이 여야합니다. 순수한 CSS 버전 1 및 자바 스크립트의 비트가 필요하다 (2)와 함께이 할 수없는 것처럼
는alt text http://www.freeimagehosting.net/uploads/51b9ba3e38.jpg
<html>
<head>
<title></title>
</head>
<body>
<form>
<style type="text/css">
body
{
padding: 0px;
width:1000px;
margin: 0px auto;
margin-top:5px;
}
#header
{
background: red;
height: 30px;
margin-bottom:5px;
font-size:30px;
text-align:center;
border:solid 1px;
}
#left_bar
{
background: blue;
width:40px;
float:left;
margin-right:5px;
border:solid 1px;
height:100%;
}
#file_view
{
background: yellow;
width:150px;
float:left;
margin-right:5px;
border:solid 1px;
height:100%;
}
#main_contant
{
background: orange;
float:left;
width:747px;
margin-right:5px;
border:solid 1px;
height:100%;
}
#right_bar
{
background: cyan;
width:40px;
float:right;
border:solid 1px;
height:100%;
}
#footer
{
background: purple;
height: 20px;
clear:both;
text-align:center;
color: white;
border:solid 1px black;
}
#container
{
height:500px;
margin-bottom:5px;
}
#clear
{
clear:both;
}
</style>
<div id="header">Header</div>
<div id="container">
<div id="left_bar">Left bar</div>
<div id="file_view">File view</div>
<div id="main_contant">Main contant</div>
<div id="right_bar">Right bar</div>
<div id="clear"></div>
</div>
<div id="footer">Þetta er footer fyrir síðuna</div>
</form>
</body>
</html>