Question

我花了一些时间在这上面，但无法解决这个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 { {1}}高度应该更小，否则应该更高，具体取决于内容。

（2）当窗口调整大小时，在需要时在.quote_list_container div上显示滚动条。

Answer 1

1）使用body { margin:0; }

从body元素中删除默认边距

2）设置高度：100％到table，body和html的父div

3）由于您只需要quote_list_container div上的滚动条，您需要知道标题的高度，然后您可以使用calc来设置带有max-height的quote_list_container div：100％减去标题的高度< / p>

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>

如何使页面上的子div可滚动调整大小？ CSS

1 个答案: