Question

我有这个布局问题。我正在尝试制作一个包含Header，foother和容器的布局。容器内有4个div，名为Left_bar，Right_bar，file_view和main_content。

页眉和页脚设置为固定高度。但我希望容器最小高度为500px，如果有必要则更高。我试图将容器设置为min-height：500px并且容器内的所有div都高度：100％，它没有用。

实现这一目标的最佳方式是什么？基本上，容器应根据main_content div中的容量变化高度。容器中的所有其他div应该具有相同的高度。

请参阅以下代码和屏幕截图

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>

Answer 1

使用纯CSS版本1和2看起来这是不可能的。需要一些javascript。这是一个工作解决方案，带有一点点javascript和对你的html和css的一些小改动。

<html>
<head>
<title></title>
</head>
<body>
<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:auto;
    min-height: 500px;
}

#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
{
    margin-bottom:5px;
}

#clear
{
    clear:both;
}

</style>

    <form>
    <div id="pagecontainer">
    <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">
                                cMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contant cMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contant  cMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contant cMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contant cMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contant cMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contant cMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contant
            </div>
            <div id="right_bar">Right bar</div>
        <div id="clear"></div>
</div>

    <div id="footer">Þetta er footer fyrir síðuna</div>
    </div>
    </form>

</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
//Get the height of the middle div and adjust others
var level = $("div#main_contant").height();
$("div#left_bar").height(level);
$("div#left_bar").height(level);
$("div#file_view").height(level);
$("div#right_bar").height(level);
</script>
</html>

我使用Jquery库来读取内容div的高度（具有可变高度）并相应地调整其他div的高度。您可能会注意到在页面重新加载期间，高度调整需要一段时间，但如果将库放在与代码相同的服务器中，这将足够快。

容器中有四列的CSS布局问题

1 个答案: