Question

我无法通过PHP生成的表格的内容来扩展HTML div的高度。

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

此页面的主要脚本如下：

<div id="wrapper">

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

    </div>
</div>

</div>

我认为如果#wrapper和#contentleft有高度：auto或者高度未设置表格将决定这些分区的大小，而是表格只是自己坐着，延伸到空白区域，而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不是。任何帮助表示赞赏！

Answer 1

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

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

Answer 2

你可以试试这个：
- 将#contenmain显示设置为阻止 - 将#contentleft和#contentright显示设置为内联块。

#contentmain {display：block; ...}

#contentleft {display：inline-block; ...}

#contentright {display：inline-block; ..}

Answer 3

试试这个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;*/
}

带内容的自动HTML文档高度

3 个答案: