Question

我的网站目前对所有网页都有这种总体布局：

<?php
include "head.php";
?>
<title></title>
<?php
include "top.php";
?>
<div class="mainbody">
</div>
<?php
include "bottom.php";
?>

head.php包括html和head stuff（即页面上最顶层的东西），top.php包括站点徽标和水平导航栏，bottom.php包括页脚和关闭html / body标签，以及mainbody类包含特定页面的内容。

现在我的问题出现在一个特定页面上。在每个页面上，有足够的内容使页面足够大以至于需要可滚动，并且mainbody div扩展以适应这一点。我的一个页面的问题是内容太少，或者更确切地说，大多数内容都是浮动的，因此div不像通常那样扩展。我想我可以通过在CSS中添加一个min-height来修复它，但这不起作用。 CSS目前看起来像这样：

.mainbody {
background-image: url("Images/Background.png");
border-radius: 5px;
-moz-border-radius: 5px;
padding: 0.7%;
position: relative;
width: 68%;
min-height: 80%;
min-width: 768px;
margin: 0px auto;
}

除了最小高度外，每条线都有效。我无法让它发挥作用。

Answer 1

将min-height的值以像素为单位

min-height: 400px;

这是向你展示的小提琴

FIDDLE

<强>加成

要做这个纯粹的CSS你需要像身份一样添加一些css

 body {position:absolute; height:100%; width:100%; overflow:visible; }
 #content { background-color:#cccccc; min-height:80%; }

FIDDLE

Answer 2

你清理了花车了吗？你说内容是浮动的，它会导致主体div不扩展。

您还可以使用粘性页脚技术，例如this one。在网络上漂浮的粘性页脚片段很少，只需挑选最适合您的内容。：）

页面内容div和最小高度

2 个答案: