0
我的浮動子div不包含在父div中，我已經嘗試了很多堆棧溢出的解決方案，但是他們都沒有工作。我使用的div是頁面大小的100％，然後有填充，其中兩個包含兩個浮動div。兩個浮動div的高度設置爲100％，但是，它們的高度不是100％的父div，就是爲什麼他們溢出它。我不想使用隱藏的解決方案。浮動子元素溢出父div
body,
html {
height: 100%;
}
.all_convo_prev_container {
padding: 0px;
margin-right: 0px;
width: 40%;
height: 100%;
float: left;
border-left-style: solid;
border-left-width: 2px;
border-left-color: #E5E5E5;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #E5E5E5;
border-top-style: solid;
border-top-width: 2px;
border-top-color: #E5E5E5;
min-height: 100%;
}
.convo_prev_container {
width: 100%;
float: left;
position: relative;
}
.convo_container {
width: 59%;
float: left;
overflow: hidden;
border-style: solid;
border-width: 2px;
border-color: #E5E5E5;
height: 100%;
}
.square {
float: left;
position: relative;
width: 28%;
padding-bottom: 28%;
/* = width for a 1:1 aspect ratio */
margin: 2%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
/* you change this to "contain" if you don't want the images to be cropped */
}
.img_1-1 {
background-image: url(images/202482895414394109718201703998660.jpg);
}
.name {
position: absolute;
height: 50%;
width: 100%;
/* fill parent */
z-index: -1;
padding-left: 32%;
overflow: hidden;
padding-right: 2%;
}
.name P {
margin: 0;
position: absolute;
/* 2 */
top: 50%;
/* 3 */
transform: translate(0, -25%)
/* 4 */
}
.last_message {
position: absolute;
height: 50%;
width: 100%;
bottom: 0;
/* fill parent */
z-index: -1;
padding-left: 32%;
margin-right: 2%;
}
.last_message P {
margin: 0;
position: absolute;
/* 2 */
top: 50%;
/* 3 */
transform: translate(0, -75%)
/* 4 */
}
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #E5E5E5;
}
.wrapper:after {
padding-top: 28%;
/* 16:9 ratio */
display: block;
content: '';
}<div id="page-wrapper" style="height: 100%">
<div style="max-width: 1000px; margin-left: auto; margin- right: auto; padding-top: 3%; padding-bottom: 3%; min-height: 100%; max-height: 100%; position-absolute;">
<div class="all_convo_prev_container">
<div class="wrapper">
<div class="square img_1-1"></div>
<div class="name">
<p><b>Test1</b>
</p>
</div>
<div class="last_message">
<p>Test2</p>
</div>
</div>
<div class="wrapper">
<div class="square img_1-1"></div>
<div class="name">
<p><b>Test3</b>
</p>
</div>
<div class="last_message">
<p>Test4</p>
</div>
</div>
</div>
<!-- all_convo_prev_container -->
<div class="convo_container">
<p>Test5</p>
</div>
<!-- convo_container -->
</div>
</div>
那你想讓它當一切都像修正？ – jonmrich
它可能是一個很長的，但你可以嘗試'* {box-sizing：border-box; }' –
基本上我希望沒有滾動，兩列應該在頁面底部之前完成3％。 –