html - div内容流入其他div

Question

https://jsfiddle.net/nwq3v3t2/1/

html, body {
    width: 100%;
    height: 100%;
}

#footer-content {
    position: absolute;
    bottom: 2px;
    /* top: 2px; */
    /* left: 2px;
    right: 2px; */
    text-align: right;
    font: bold;
}

.hp_wgt_row {
    min-width: 33.33%;
    min-height: 33.33%;
    height: 33.33%;
    /* border: 2px black solid; */
    position: relative;
}

.hp_wgt_col {
    min-width: 33.33%;
    min-height: 33.33%;
    height: 33.33%;
    padding: 2px;
    position: relative;
}

.hp_wgt_header {
    background-image: linear-gradient( 45deg, blue, red );
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    height: 23px;
    padding: 2px 12px;
    width: 90%;
    margin: auto;
}

.hp_wgt_content_wrapper {
    /* position: relative;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden; */
    min-height: 200px;
}

.hp_wgt_content {
    width: 90%;
    margin: 3px auto;
    height: 100%;
    overflow-y: auto;
}

.hp_wgt_circular_ul {
    /* height: 90%; */

}

.hp_wgt_circular_ul li {
    color: black;
}

.hp_wgt_circular_ul li:nth-child(odd) {
    background-color: #e5e5e5;
}
/* .hp_wgt_circular_ul li:nth-child(even) {
    background-color: blue;
} */

<div style="height: 100%;">
        <div class="container-fluid" style="height: 95%;">          
            <div class="row hp_wgt_row">
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Circular</div>
                    <div class="hp_wgt_content_wrapper">
                        <div class="hp_wgt_content">
                            <ul class="list-group hp_wgt_circular_ul">
                                <li class="list-group-item">Circular 1 Circular 1 Circular 1 Circular 1 Circular 1 Circular 1 Circular 1</li>
                                <li class="list-group-item">Circular 2 Circular 2 Circular 2 Circular 2 Circular 2 Circular 2</li>
                                <li class="list-group-item">Circular 3</li>
                                <li class="list-group-item">Circular 4</li>
                                <li class="list-group-item">Circular 5</li>
                                <li class="list-group-item">Circular 6</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Logo</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Login</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
            </div>
            <div class="row hp_wgt_row">
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Phone Database</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Photo Gallery</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">News</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
            </div>
            <div class="row hp_wgt_row">
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Links</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Events</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Others</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
            </div>
        </div>

    </div>

列表与底部 div 重叠。我尝试了固定高度和溢出，但滚动条看起来很糟糕，在浏览器全屏上，div 之间存在间隙。我需要的是，无论屏幕尺寸如何，.hp_wgt_content 中的内容都应保持高度和重叠规则。

我完全是网页设计的菜鸟。

Answer 1

我不确定您想显示什么输出。尝试从您的 .hp-wgt-row 类中删除 height，因为它们会重叠。如果你想让它响应其他屏幕尺寸，只关注 width。

更新:

我从 .hp_wgt_row 返回了高度并添加了 overflow-y: scroll。然后我删除了 .hp_wgt_col 上的高度，而不是使其不重叠。

html, body {
    width: 100%;
    height: 100%;
}

#footer-content {
    position: absolute;
    bottom: 2px;
    /* top: 2px; */
    /* left: 2px;
    right: 2px; */
    text-align: right;
    font: bold;
}

.hp_wgt_row {
    min-width: 33.33%;
    min-height: 33.33%;
    height: 33.33%;
    /* border: 2px black solid; */
    position: relative;
    overflow-y: scroll;
}

.hp_wgt_col {
    min-width: 33.33%;
    min-height: 33.33%;
    /* height: 33.33%; */
    padding: 2px;
    position: relative;
}

.hp_wgt_header {
    background-image: linear-gradient( 45deg, blue, red );
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    height: 23px;
    padding: 2px 12px;
    width: 90%;
    margin: auto;
}

.hp_wgt_content_wrapper {
    /* position: relative;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden; */
    min-height: 200px;
}

.hp_wgt_content {
    width: 90%;
    margin: 3px auto;
    height: 100%;
    overflow-y: auto;
}

.hp_wgt_circular_ul {
    /* height: 90%; */

}

.hp_wgt_circular_ul li {
    color: black;
}

.hp_wgt_circular_ul li:nth-child(odd) {
    background-color: #e5e5e5;
}
/* .hp_wgt_circular_ul li:nth-child(even) {
    background-color: blue;
} */

<div style="height: 100%;">
        <div class="container-fluid" style="height: 95%;">          
            <div class="row hp_wgt_row">
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Circular</div>
                    <div class="hp_wgt_content_wrapper">
                        <div class="hp_wgt_content">
                            <ul class="list-group hp_wgt_circular_ul">
                                <li class="list-group-item">Circular 1 Circular 1 Circular 1 Circular 1 Circular 1 Circular 1 Circular 1</li>
                                <li class="list-group-item">Circular 2 Circular 2 Circular 2 Circular 2 Circular 2 Circular 2</li>
                                <li class="list-group-item">Circular 3</li>
                                <li class="list-group-item">Circular 4</li>
                                <li class="list-group-item">Circular 5</li>
                                <li class="list-group-item">Circular 6</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Logo</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Login</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
            </div>
            <div class="row hp_wgt_row">
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Phone Database</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Photo Gallery</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">News</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
            </div>
            <div class="row hp_wgt_row">
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Links</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Events</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
                <div class="col-md-4 hp_wgt_col">
                    <div class="hp_wgt_header">Others</div>
                    <div class="hp_wgt_content">Circular</div>
                </div>
            </div>
        </div>

    </div>