带有内容的自动 HTML 文档高度答案

【问题标题】：Automatic HTML Document Height with Content带有内容的自动 HTML 文档高度
【发布时间】：2013-12-06 23:33:44
【问题描述】：

我无法让我的 HTML div 的高度与我的 PHP 生成的表格的内容一起缩放。

我使用的表格可能会改变大小，所以我不想静态设置父 div 的高度，但我似乎无法让它正常工作。我没有漂浮任何东西。

这个页面的主脚本是这样的：

<div id="wrapper">

<div id="contentmain">
    <div id="contentleft">
        <?php
        include ('get_table.php');
        ?>
    </div>
    <div id="contentright">

    </div>
</div>

</div>

我认为如果 #wrapper 和 #contentleft 未设置 height:auto 或 height ，则表格将决定这些分区的大小，但表格只是独立放置，延伸到空白区域，而 div 则很薄顶部的线条。

CSS：

#contentmain
{
    width:940px; 
    height: 1164px; 
    background-color:aqua;
    margin: 10px 10px 0px 10px;
}

#contentleft
{
    width: 700px; 
    height:inherit;
    background-color: #CAE2ED;
    position:absolute;
}

table
{
    border-spacing:8px;
    font-family:Georgia, serif;
    padding:0px;
    box-shadow:1px 0px 5px 0px #000000;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    margin:0 auto;
    background-color:white;
    /*border-collapse: separate;
    border-spacing: 0 10px;*/
}

注意：contentleft 正在正确调整表格的大小，但 contentmain 和 wrapper 没有。任何帮助表示赞赏！

【问题讨论】：

为了更好地获得帮助，请使用 jsfiddle 等 pastebin 类型的网站。

标签： php html css css-position html-table

【解决方案1】：

试试这个 CSS：

#contentmain
{
    width:940px; 
    height: 1164px; 
    background-color:aqua;
    margin: 10px 10px 0px 10px;
    display:inline;
}

#contentleft
{
    width: 700px; 
    height:inherit;
    background-color: #CAE2ED;
    position:absolute;
    display:inline;
}

table
{
    border-spacing:8px;
    font-family:Georgia, serif;
    padding:0px;
    box-shadow:1px 0px 5px 0px #000000;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    margin:0 auto;
    background-color:white;
    display:inline;
    /*border-collapse: separate;
    border-spacing: 0 10px;*/
}

【讨论】：

【解决方案2】：

您是否尝试过使用 clearfix 方法？ http://jsfiddle.net/zqtWL/

. clearfix{display:block;clear:both; float:none; width:100%;}

【讨论】：

【解决方案3】：

你可以试试这个：
- 将您的#contenmain 显示设置为阻止。
- 将您的#contentleft 和#contentright 显示设置为inline-block。

#contentmain { 显示：块； ...}

#contentleft { 显示：内联块； ...}

#contentright { 显示：内联块； ..}

【讨论】：