Question

我在使用CSS表格时遇到了问题。不是传统的表，而是使用display:table等的一组div。

问题是，当其中一个单元格为空时它很有效，但是只要我向其添加内容，表就会延伸以容纳内容。

#dispcontainer {
    display: table;
    width:100%;
    height:100%;
    overflow-y: scroll;
    max-height:100%;
    table-layout:fixed;
    border-collapse:collapse;
}

.disprow  {
    display: table-row;
    width:100%;
}

.dispcell {
    display: table-cell;
    width:100%;
    height:100%;
}

HTMl：

<body>

<div class="box">
<div class="content">
<div id="dispcontainer">
    <div class="disprow">
        <div class="dispcell">
        <img class="heading_img" src="img/heading.png" /><br />
        <div class="nav_buttons">
        <?php include("menu.html"); ?>
        </div>
        </div>
    </div>
    <div class="disprow">
        <div class="dispcell">
            <div style="height:100%;overflow:hidden;">
            <?php include("tumblr/tumblrFeed.php"); ?>
            </div>
        </div>
    </div>
</div>

</div>
        <?php include("social_buttons.html"); ?>
</div>

<div id="contactBar"><?php include("contactDetails.html")?></div>
</body>

正确的网站在这里：http://fadeinfuture.net/users/tbw/test2.php

我只是不明白如何让表永远不会变得比它包含div更高。

我使用常规的<table>，但Internet Explorer基本上不喜欢它同样的问题。

这种布局的原因是我希望标题是流畅的，具体取决于屏幕宽度和下面的区域，以占据屏幕的其余部分。

Answer 1

尝试将overflow-y: scroll;移至box div。

Answer 2

您可以使用JavaScript和jQuery。（使用纯CSS可能会更困难）

<script>
   $(function() {
      $("#parent").height($("#child").height());
   });
</script>

我在我的网站上使用类似的东西。

限制CSS表的高度 - 忽略内容高度

2 个答案: