带内容的自动HTML文档高度


Automatic HTML Document Height with Content

我很难将HTMLdiv的高度与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-unset,那么表将决定这些分区的大小,但相反,表只是单独放置,延伸到空白区域,而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不是。感谢您的帮助!

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

您尝试过使用clearfix方法吗?http://jsfiddle.net/zqtWL/

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

您可以尝试以下操作:
-将#contentmain显示设置为block
-将#contentleft和#contentright显示设置为内联块。

#contentmain{display:block;…}

#contentleft{display:inline block;…}

#contentright{display:inline block;..}