页面内容 div 和最小高度答案

【问题标题】：Page content div and minimum height页面内容 div 和最小高度
【发布时间】：2012-11-16 23:51:56
【问题描述】：

我的网站目前所有页面的总体布局都是这样的：

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

head.php 包括 html 和 head 内容（即页面上最顶部的内容），top.php 包括站点徽标和水平导航栏，bottom.php 包括页脚和结束 html/body 标记，以及mainbody 类包含特定页面的内容。

现在我的问题出在一个特定的页面上。在每个页面上，都有足够的内容使页面足够大以至于它需要可滚动，并且主体 div 会扩展以适应它。我的一个页面的问题是内容太少，或者更确切地说，大部分内容都是浮动的，所以 div 没有像往常一样展开。我以为我可以通过向 CSS 添加最小高度来修复它，但这不起作用。 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;
}

每一行都有效，除了最小高度。我无法让它工作。

【问题讨论】：

标签： html height css

【解决方案1】：

以像素为单位输入 min-height 的值

min-height: 400px;

这里有一个小提琴给你看

FIDDLE

加法

要完成这个纯 css，你需要像这样向 body 添加一些 css

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

FIDDLE

【讨论】：

我害怕那个。这不会给移动用户带来问题吗？有没有办法让百分比起作用？
我没有关注移动用户会如何失败...如果您愿意，可以使用 jquery 或 javascript 动态设置高度...但在这种情况下似乎有点矫枉过正.
@user1583168 这是一个使用jquery的例子jsfiddle.net/videsignz/2pEwa/1
@user1583168 我找到了一个纯css解决方案，看我修改后的答案
做到了！你是绝对的传奇！干杯!如果我不介意在这里问，有没有办法让高度根据浮动内容改变？我假设不是，但我不妨问问。

【解决方案2】：

你清理过花车吗？你说内容是浮动的，导致主体div没有展开。

您还可以使用粘性页脚技术，例如this one。网络上几乎没有粘性页脚 sn-ps，只需选择最适合您的。 :)

【讨论】：

我认为您必须对此进行详细说明。虽然它不会扩展，因为我无法让基于百分比的最小高度起作用，但如果有可折叠/可扩展的内容，它会扩展。