CSS Layout Push Div底部

Question

我一直在嘗試不同的方式，但無法實現我想要的。

<div id="parent"> 
    <div id="child-1"></div> 
    <div id="child-2"></div> 
    <div id="child-3"></div> 
</div> 

所以我有#parent在height: 100vh。

#child-1應該有height: 100%父母。

#child-2和#child-3應具有width: 100%和height: auto和它們應當在彼此的頂部上的bottom: 0位置堆疊。

我一直在試圖設置父親和兩個孩子絕對，但第一個孩子的身高被忽略..我試過display flex但第一個孩子的身高不是父母的100％..我很困惑怎麼辦這個。

有人可以幫忙嗎？

這裏是我想要實現：jsfiddle.net

Answer 1

你必須首先獲得#child-2的bottom值動態地照你說的應該是對的#child-3頂部。

您需要申請jQuery來獲得#child-3高度動態，然後應用的#child-3高度值的child-2的bottom值，就像

#child-2 { 
    bottom: height-of-child-3; 
} 

看這個Codepen

或者看下面的代碼片段：

height_child_three = $('#child-3').height(); 
 

 
$('#child-2').css({ 
 
\t position: 'absolute', 
 
\t bottom: height_child_three 
 
});

#parent { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: #000; 
 
    position: relative; 
 
} 
 

 
#child-1 { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #eee; 
 
} 
 

 
#child-2 { 
 
    width: 100%; 
 
    background: #a0ea0e; 
 
} 
 

 
#child-3 { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    background: #30e30e; 
 
} 
 

 
body { margin: 0; } /* A small reset */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <div id="child-1"> 
 
    <strong>I'm child 1</strong> 
 
    </div> 
 
    <div id="child-2"> 
 
    <strong>I'm child 2</strong> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione deleniti voluptate commodi distinctio, repellendus qui, placeat laboriosam eligendi! Ducimus reiciendis officiis debitis placeat adipisci quae hic tempore vitae suscipit nemo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed aliquid, laborum nisi quos excepturi hic! Molestias hic consectetur dolor! Perferendis iste, quisquam quaerat ab, odio ducimus! Odio, minima error?</p> 
 
    </div> 
 
    <div id="child-3"> 
 
    <strong>I'm child 3</strong> 
 
    </div> 
 
</div>

希望這有助於！

Answer 2

這是你所需要的？

HTML：

<div id="parent"> 
    <div class="child-1"></div> 
    <div class="child-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum necessitatibus dolorem soluta laudantium cupiditate maiores neque, aliquid accusamus autem saepe tempora, itaque possimus, eaque deleniti odio atque enim omnis.</div> 
    <div class="child-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, illo est dolor dolores placeat deleniti quae consequuntur eum ipsum blanditiis laboriosam quod repellendus fugit! Odio quis rem vel a dolores.</div> 
</div> 

CSS：

html, 
body, 
div { 
    margin: 0; 
    padding: 0; 
} 

*, 
*:after, 
*:before { 
    box-sizing: border-box; 
} 

#parent { 
    position: relative; 
    width: 100vw; 
    height: 100vh; 
    background: #ccc; 
} 

.child-1 { 
    width: 100%; 
    height: 100%; 
    background: red; 
} 

.child-2 { 
    width: 100%; 
    height: auto; 
    padding: 30px; 
    background: blue; 
} 

.child-3 { 
    width: 100%; 
    height: auto; 
    padding: 30px; 
    background: green; 
} 

在這裏你可以只用簡單的CSS看到的解決方案。 CODEPEN