1

我在使用用于布局的 CSS 表时遇到问题。不是传统的表格，而是一组 div 的使用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>的 's 一起使用，但是 Internet Explorer 基本上不喜欢它，但存在同样的问题。

这种布局的原因是我希望标题根据屏幕宽度和下方区域占据屏幕的其余部分是流动的。

4

2 回答 2

2

尝试将您的移动overflow-y: scroll;到boxdiv。

于 2013-09-09T20:52:34.513 回答
-1

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

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

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

于 2013-09-09T21:26:48.803 回答