html - 如何使子 div 在页面调整大小时可滚动？ CSS

Question

DEMO

我在这上面花了一些时间，但无法解决这个 CSS 问题。我有 4 个嵌套的 div。最里面的子 div 包含一个行表。

HTML 结构:

<div class="moduleContentContainer">
<div id="dash-board-container">
    <div class="dash-board-item">
        <div>pENDING QUOTES</div>
        <div class=".quote_list_container">
            <table>
                <thead>
                    <tr><th>Names</th></tr>
                </thead>
                <tbody>
                    <tr><td>ssss</td></tr>
                    <tr><td>ssss</td></tr>
                    <tr><td>ssss</td></tr>
                    <tr><td>ssss</td></tr>
                    <tr><td>ssss</td></tr>
                    <tr><td>ssss</td></tr>
                    <tr><td>ssss</td></tr>
                    <tr><td>ssggggss</td></tr>
                    <tr><td>ssggggss</td></tr>
                    <tr><td>ssggggss</td></tr>
                    <tr><td>ssggggss</td></tr>
                    <tr><td>ssggggss</td></tr>
                    <tr><td>ssggggss</td></tr>
                    <tr><td>ssggggss</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

(1) 我希望 dash_Board_Item Div 的高度基于其内容(.quote_list_container div 中的内容)的大小。因此，如果表中有一行，dash-board-item div 的高度应较小，否则应更高，具体取决于内容。

(2) 当窗口调整大小时，需要时在.quote_list_container div 上显示一个滚动条。

Answer 1

1) 使用 body { margin:0; 移除 body 元素的默认边距}

2) 设置 height:100% 到 table, body 和 html 的父 div

3) 由于你只想要 quote_list_container div 上的滚动条，你需要知道标题的高度，然后你可以使用 calc 将 quote_list_container div 设置为 max-height:100% 减去标题的高度

4) 在您用前面的点命名类的 quote_list_container div 上，您的标记中有一个看起来像拼写错误的东西。你可能不是那个意思。

FIDDLE

body {
    margin:0;
}
html, body, .moduleContentContainer {
    height: 100%;
}
.title {
    height: 30px;
}
#dash-board-container {
    position: absolute;
    height: 90%;
}
.dash-board-item {
    height: 100%;
    margin-right: 20px;
    display: inline-block;
    border-style: solid;
    max-width: 700px;
    min-width: 300px;
    border-color: #999999;
    border-width: 1px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}
.quote_list_container {
    max-height: calc(100% - 30px);
    overflow: auto;
    position: relative;
}

<div class="moduleContentContainer">
    <div id="dash-board-container">
        <div class="dash-board-item">
            <div class="title">pENDING QUOTES</div>
            <div class="quote_list_container">
                <table>
                    <thead>
                        <tr>
                            <th>Names</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ssss</td>
                        </tr>
                        <tr>
                            <td>ssss</td>
                        </tr>
                        <tr>
                            <td>ssss</td>
                        </tr>
                        <tr>
                            <td>ssss</td>
                        </tr>
                        <tr>
                            <td>ssss</td>
                        </tr>
                        <tr>
                            <td>ssss</td>
                        </tr>
                        <tr>
                            <td>ssss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                        <tr>
                            <td>ssggggss</td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <script type="text/javascript">
                        
                    </script>
                </table>
            </div>
        </div>
    </div>
</div>