Question

我有一个包含在标题，左列和主要内容中的包装器。在包装器外面我得到了页脚。

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

这是我的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

你不需要在包装器中添加高度，它将根据包装器内的内容获得高度：）

Div文本在包装器内不垂直拉伸

4 个答案: