2016-03-08 71 views
0

請參閱:http://codepen.io/RuttyJ/pen/oxxvrL 當屏幕很小時,兩個div在溢出時會改變高度。我希望兩個div始終保持相同的高度,不管使用什麼<table>當兄弟姐妹溢出時,表格不填充div

.splash_row{ 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    min-width: 200px; 
} 
.splash_col.half{ 
    display: table-cell; 
    width: 50%; 
} 
.splash_inside{ 
    height: 100%; 
    margin-top: 0; 
    margin-bottom: 0; 
    background-color: green; 
} 

編輯: 希望以填充父列完全沒有給巡航能力凸塊向上或向下的包含元素的最小高度。我知道Javascript可以做到這一點,但CSS3可以自己做到這一點嗎?

回答

1

您可以將min-height屬性添加到類.splash_col_content的div中。它應該是這樣的:

.splash_col_text { min-height: 56px; background-color: black; color: white; font-family: 'EB Garamond', serif; font-style: italic; font-size: 24px; padding: 12px; transition: 0.5s cubic-bezier(0.64, 0.35, 0.58, }

理想情況下,你會地方CSS這個媒體查詢裏面,所以它只能裝載在屏幕上500像素下:@media (max-width: 500px).

Codepen:http://codepen.io/kristywessel/pen/KzzKeP

+0

是這樣的作品,但是我希望能夠解決這個問題,這樣它就會始終填充父代的其餘部分,而不需要爲特定情況編碼。 – Ruttyj