我有一个包装器，里面有标题、左栏和主要内容。 在 wrapper 外面，我得到了页脚。
我的问题是，如果没有足够的文本，主要内容不会延伸到页面底部。如果我插入 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;
}
感谢所有帮助发现问题的人的建议!
最佳答案
将页面拆分为多列并自动拉伸(stretch)视口(viewport)的高度是一个持续的话题。只需谷歌一下，那里有几种基于 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 */
}
关于css - 文本不在包装内垂直拉伸(stretch)的 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16531861/