0

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

我的问题是，如果没有足够的文字，主要内容不会延伸到页面底部。如果我插入 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;
}

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

4

4 回答 4

0

以下是您应该查看和实施的问题的关键：

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

#wrapper, #leftcolumn, #main {
height: 100%; 
}
于 2013-05-13T22:27:07.917 回答
0

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

于 2013-05-13T23:36:08.970 回答
0

这是你想要的样子吗？如果没有，请告诉我，我会修改我的答案。

更新：-

#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;
}

这应该会给您预期的结果。不需要添加我以前的样式，现在就使用这个。

于 2013-05-13T22:07:28.273 回答
0

将页面拆分为多个列并自动拉伸视口的高度是一个持续的话题。只是谷歌，那里有几个基于 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 */
}
于 2013-05-13T22:22:42.570 回答