div的文字在包装器内未垂直拉伸

Question

我有一个包装，里面有一个标题，一个左列和主要内容。 在包装纸外面，我找到了页脚。

我的问题是，如果没有足够的文本，则主要内容不会延伸到页面底部。 如果我插入lorem ipsum等，可以有很多行，但都行，但是如果我只尝试几行，则主div在包装器的最末端之前停止（或者更好的是，在页脚之前结束页面的结尾）。

这是我的html代码

<?php session_start();
unset($_SESSION['message']);
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../css/stili.css" type="text/css" />
<script type="text/javascript" src="../script/scripts.js"></script>

<meta charset="utf-8"/>
<title></title>
<style>

</style>
</head>
<body>
<div id="wrapper">

<div id="header"> 
    <?php
     include('../php/header.php');
    ?>
</div>

<div id="leftcolumn">
<?php
     include('../php/leftcolumn.php');
?>
</div>
<div id="main" >Welcome to our site

...Some text, but not enough to stretch to the end of page...


</div>
         <div style="clear: both"></div>
</div>

<div id="footer">Copyright 2013</div>

</body>
</html>

这是CSS

html,
body {
padding:0;
margin:0;
height:100%;
}

#wrapper {
min-height:100%;
height:auto;
margin:0 auto -30px;
width:950px;
background-color:#E3AA56;

}

#main {
float:right;
width:680px;
padding:10px;
background:#E0CD90;
text-align:justify;
overflow: auto;

 }

#main a{
font-size:40px;
}

#footer{
 border-top: 2px solid #CCCCCC;
width:950px;
margin:auto ;
height:30px;
background:#ee5;
clear: both;
}

感谢大家的建议，这将有助于发现问题！

Answer 1

这就是您想要的样子吗？ 如果没有，请让我知道，我将修改答案。

更新：-

#main {
height:100%
}

#wrapper {
height:100%
}
#leftcolumn {
padding:10px;
height:100%;
}

这应该工作。

更新2：-

#main {
height:100%;
}

#wrapper {
height:100%;
overflow:hidden;
min-height:500px; (you can change this to your liking)
}

#footer {
position:relative;
}

这应该给您期望的结果。 无需添加我以前的样式，现在就使用此样式。

Answer 2

将页面分为多列会自动扩展视口的高度是一个持续的主题。 只是谷歌，周围有几个基于CSS的解决方案。

问题在于周围框的高度不确定（您的情况下为html，body，wrapper）。 如果父级也有尺寸，则只能添加一些“样式”。

一种怪异的解决方案是设置html对象的样式：

<html style="overflow:hidden;clip:
             rect(auto);height:100%;;margin:0px;padding:0px;
             background-color:white;">

（是的，这不是禁止的，您可以做到这一点，甚至经过IE 6和7的验证...）和

#wrapper {
min-height:100%;
height:100%';
margin:0 auto -30px;
width:950px;
background-color:#E3AA56;
overflow: hidden; /* not sure if you want that */
}

Answer 3

这是您应查看并根据需要实施的问题的关键 ：

html, body {
height: 100%; 
min-height: 100% /* for firefox */
}

#wrapper, #leftcolumn, #main {
height: 100%; 
}

Answer 4

您不需要在包装器中添加高度，它会根据包装器中的内容获得高度：)