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

我不确定您要显示的输出。尝试从height类中删除.hp-wgt-row，因为这会使其重叠。如果您希望对其他屏幕尺寸做出响应，请仅关注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>

Answer 2

如果删除最上面的div的内联样式高度：100％并使其为“auto”。它将解决问题

div内容流入其他div

2 个答案: