如何在高度可變時將兩個元素合併爲一個？

這裏是我的HTML：如何在高度可變時將兩個元素合併爲一個？

.parent{ 
 
    position: fixed; 
 
    border: 1px solid; 
 
    height: 43%; 
 
    width: 300px; 
 
} 
 

 
.first_el{ 
 
    display:block; 
 
    border: 1px solid green; 
 
    height: 30px; /* constant */ 
 
} 
 

 
.second_el{ 
 
    border: 1px solild red; 
 
    height: 100%; /* dynamic */ 
 
    overflow: scroll; 
 
}

<div class="parent"> 
 
    <span class="first_el">title</span> 
 
    <div class="second_el"> 
 
    one<br>two<br> three<br> four<br> five<br> six<br> seven<br> eight<br>nine<br> 
 
    </div> 
 
</div>

正如你所看到的，第二個元素是從它的父。問題是，如何將所有屏幕尺寸設置爲其父級？

注意到我可以使用calc(100%-30px)作爲height的.second_el然後問題就解決了。但正如我所知calc舊版瀏覽器不支持calc()，因此我不想使用它。有其他選擇嗎？ （因爲舊瀏覽器，我也不想使用box-sizing: border-box;）

來源

2016-08-22 stack

如果你真的想支持古代瀏覽器，那麼你意識到'position：fixed'也不在話下吧？順便說一句，你在'.second-el'的邊框樣式中有一個錯字。 –

您可以使用jQuery爲此設置編程高度，並在調整大小時綁定處理程序。

function setSecondChildHeight() { 
    var BORDER_WIDTH = 1; 
    var parentHeight = $('.parent').outerHeight(); 
    var firstChildHeight = $('.first_el').outerHeight(); 
    var secondChildHeight = parentHeight - firstChildHeight + 2 * BORDER_WIDTH; 
    $('.second_el').height(secondChildHeight); 
} 

$(window).resize(setSecondChildHeight); 

$(function() { 
    setSecondChildHeight(); 
});

下面是一個例子小提琴：https://jsfiddle.net/15wam02w/

來源

2016-08-22 04:46:12 Karin

謝謝.. upvote ..但我希望通過純CSS來做到這一點。這就是爲什麼我沒有將JS標籤附加到我的問題。不管怎樣，謝謝你。 – stack

修訂

添加您的父類overflow:hidden;

HTML

<div class="parent"> 
    <span class="first_el">title</span> 
    <div class="second_el"> 
    one 
    <br>two 
    <br> three 
    <br> four 
    <br> five 
    <br> six 
    <br> seven 
    <br> eight 
    <br>nine 
    <br> 
    </div> 
</div>

CSS

.parent{ 
    position: fixed; 
    border: 1px solid; 
    height: 43%; 
    width: 300px; 
    padding-bottom:30px; 
    overflow:hidden; 
} 

.first_el{ 
    display:block; 
    border: 1px solid green; 
    height: 30px; 
    overflow:hidden; 
} 

.second_el{ 
    border: 1px solid red; 
    height:100%; 
    overflow-y: scroll; 
    overflow-x: hidden; 
}

DEMO

來源

2016-08-22 04:51:18 Fiido93

您的演示需要編輯.. – stack

您好，我可以知道爲什麼嗎？演示有錯嗎？ – Fiido93

嗨.. [This]（http://i.stack.imgur.com/ezKHO.png）就是我所看到的演示。 – stack

在你.second_el邊境固體法術的錯誤是存在的。糾正並給予overflow-x:hidden和overflow-y: scroll

.second_el{ 
    border: 1px soild red; 
    height: 100%; /* dynamic */ 
    overflow-y: scroll; 
    overflow-x: hidden; 
}

爲.parent類刪除邊框，以避免.second_el

來源

2016-08-22 04:56:27 Mani

合併邊境試試這個代碼

.parent{ 
 
    position: fixed; 
 
    border: 1px solid; 
 
    height: 43%; 
 
    width: 300px; 
 
    padding-bottom:30px; 
 
    overflow:hidden; 
 
} 
 

 
.first_el{ 
 
    display:block; 
 
    border: 1px solid green; 
 
    height: 30px; /* same as class .parent padding-bottom */ 
 
    overflow:hidden; 
 
} 
 

 
.second_el{ 
 
    border: 1px solild red; 
 
    height:100%; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
}

<div class="parent"> 
 
    <span class="first_el">title</span> 
 
    <div class="second_el"> 
 
    one<br>two<br> three<br> four<br> five<br> six<br> seven<br> eight<br>nine<br> 
 
    </div> 
 
</div>

來源

2016-08-22 04:59:27 Carson

'nine'這個詞在你的代碼片段中是不可見的。 – stack

對不起，稍等片刻 – Carson

答案也和我的一樣。大聲笑我還在等待堆棧響應我的演示大聲笑的問題。 – Fiido93

你只需要添加一個overflow:hidden;在父母的div，看到魔術！

像這樣

.parent{ 
 
    position: fixed; 
 
    border: 1px solid; 
 
    height: 43%; 
 
    width: 300px; 
 
    overflow:hidden; 
 
} 
 

 
.first_el{ 
 
    display:block; 
 
    border: 1px solid green; 
 
    height: 30px; /* constant */ 
 
} 
 

 
.second_el{ 
 
    border: 1px solild red; 
 
    height:80%; 
 
    overflow: scroll; 
 
}

<div class="parent"> 
 
    <span class="first_el">title</span> 
 
    <div class="second_el"> 
 
    one<br>two<br> three<br> four<br> five<br> six<br> seven<br> eight<br>nine<br> 
 
    </div> 
 
</div>

您還可以檢查此fiddle。

來源

2016-08-22 05:07:08

如何在高度可變時將兩個元素合併爲一個？

回答

相關問題