Question

我需要一个有三行的CSS设计并填充整个屏幕。第二行有三列。每列有三个部分（顶部，中部，底部）。我想要最后一部分，如果它太大，有一个滚动条，所以内容不会流出页面。

我已经尝试了一段时间，但我的主要问题是我要溢出的部分没有制作滚动框，它只是流出页面。有没有办法做到这一点？也许使用display:flex？

以下是我的代码的基本概念：

<div class="table">
    <div class="header">
        Header content here
    </div>
    <div class="content table-row">
        <div class="table-col">
            <div class="top-content">

            </div>
            <div class="middle-contnet">

            </div>
            <div class="bottom-contnet">
                If this content is too big, then make this div an overflow-y:scroll
            </div>
        </div>
        <div class="table-col">
            <div class="top-content">

            </div>
            <div class="middle-contnet">

            </div>
            <div class="bottom-contnet">
                If this content is too big, then make this div an overflow-y:scroll
            </div>
        </div>
        <div class="table-col">
            <div class="top-content">

            </div>
            <div class="middle-contnet">

            </div>
            <div class="bottom-contnet">
                If this content is too big, then make this div an overflow-y:scroll
            </div>
        </div>
    </div>
    <div class="footer">
        Footer content here
    </div>
</div>

如果你能提供帮助，请做。

Answer 1

您是否尝试在该行中添加其他类，以便可以使用溢出类并仅将其应用于特定行？

.overflow: overflow-y: scroll;

<div class="bottom-contnet overflow">
    If this content is too big, then make this div an overflow-y:scroll
</div>

CSS表有一行有溢出

1 个答案: