獲取嵌入塊元素的高度以填充父項

Question

我有一個包含兩個項目的容器。其中之一是select元素，所以我需要通過HTML設置size屬性。我想讓容器中的其他物品伸展高度以適合容器。我無法弄清楚。我不想明確設置容器的高度，因爲我不知道該選擇框的大小。

.container { 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
} 
 

 
.container .column { 
 
    display: inline-block; 
 
    width: 40%; 
 
    background-color: #AAA; 
 
    padding: 5px; 
 
    margin: 5px; 
 
    vertical-align: top; 
 
    height: 100%; 
 
} 
 

 
select { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="column">Stretch to fill?</div> 
 
    <div class="column"> 
 
    <select size="15"> 
 
      <option>Option 1</option> 
 
      <option>Option 2</option> 
 
     </select> 
 
    </div> 
 
    <div>

Answer 1

如果table-cell是一個選項，這裏有一個辦法做到這一點：

.container { 
 
    display: table; 
 
    width: 100%; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
} 
 

 
.container .column { 
 
    display: table-cell; 
 
    width: 40%; 
 
    background-color: #AAA; 
 
    padding: 5px; 
 
    border: 5px solid white; 
 
    vertical-align: top; 
 
    height: 100%; 
 
} 
 

 
select { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="column">Stretch to fill?</div> 
 
    <div class="column"> 
 
    <select size="15"> 
 
      <option>Option 1</option> 
 
      <option>Option 2</option> 
 
     </select> 
 
    </div> 
 
    <div>

Answer 2

如果我明白你說什麼，你所面臨的問題100% height columns。我很抱歉地告訴你，沒有實際的解決方案，但「黑客」。

Here你可以找到幾種解決方法。我喜歡使用一種真正的佈局方法。

順便說一下，這是想你不想使用實驗css3列的屬性。

Answer 3

地方，我需要一個僞元素也是一個例子：

.cf:before, 
 
.cf:after { 
 
\t content: " "; /* 1 */ 
 
\t display: table; /* 2 */ 
 
} 
 

 
.cf:after { 
 
\t clear: both; 
 
} 
 

 

 
*, *:before, *:after { 
 
\t -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
 
} 
 

 
.faux-columns { 
 
\t width: 80%; 
 
\t margin:3em auto; 
 
\t background-image: -webkit-linear-gradient(left, #f2f7fa 25%, #fff 75%); 
 
\t background-image: -moz-linear-gradient(left, #f2f7fa 25%, #fff 75%); 
 
\t background-image: -o-linear-gradient(left, #f2f7fa 25%, #fff 75%); 
 
\t background-image: linear-gradient(left, #f2f7fa 25%, #fff 75%); 
 
\t background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f2f7fa), color-stop(25%, #f2f7fa), color-stop(25%,#ffffff), color-stop(100%,#ffffff)); 
 
\t background: -moz-linear-gradient(left, #f2f7fa 0%, #f2f7fa 25%, #ffffff 25%, #ffffff 100%); 
 
\t background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f2f7fa), color-stop(25%,#f2f7fa), color-stop(25%,#ffffff), color-stop(100%,#ffffff)); 
 
\t background: -o-linear-gradient(left, #f2f7fa 0%,#f2f7fa 25%,#ffffff 25%,#ffffff 100%); 
 
\t background: -ms-linear-gradient(left, #f2f7fa 0%,#f2f7fa 25%,#ffffff 25%,#ffffff 100%); 
 
\t background: linear-gradient(left, #f2f7fa 0%,#f2f7fa 25%,#ffffff 25%,#ffffff 100%); 
 
\t border:1px solid #c1c1c2; 
 
} 
 

 
.col-1, .col-2 { 
 
\t float:left; 
 
\t vertical-align:top; 
 
\t padding:2em 3em; 
 
} 
 

 
.col-1 { 
 
\t position:relative; 
 
\t width:25%; 
 
\t background:#F2F7FC; 
 
\t border-right:1px solid #c1c1c2; 
 
} 
 

 
.col-2 { 
 
\t width:75%; 
 
\t border-left:1px solid #c1c1c2; 
 
\t margin-left: -1px; 
 
} 
 

 
.col-1:after, 
 
.col-1:before { 
 
    top:100%; 
 
    border:solid transparent;content:""; 
 
    height:0; 
 
    width:0; 
 
    position:absolute; 
 
    pointer-events:none; 
 
    display:block; 
 
} 
 
.col-1:after { 
 
    border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #f2f7fa; 
 
    border-style: solid; 
 
    border-width: 21px 0 21px 22px; 
 
    left:100%; 
 
    top: 47px; 
 
} 
 
.col-1:before { 
 
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #c1c1c2; 
 
    border-style: solid; 
 
    border-width: 22px 0 22px 23px; 
 
    left: 100%; 
 
    top: 46px; 
 
}

<div class="faux-columns cf"> 
 
    <div class="col-1"> 
 
     <h4>First column with bordered triangle pseudo element attached to it. The background needs to be the full height of .faux-columns</h4> 
 
    </div> 
 
    <div class="col-2"> 
 
     <h4> Second column which in some cases will be much taller than column</h4> 
 
     There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. 
 
     
 
     There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. 
 
    </div> 
 
</div>

Answer 4

這裏沒有答案給了我安慰，所以我去尋找真相。我添加了更多的CSS來表明兩個盒子之間的間距。

CSS：

.wrapper { 
    background-color:gray; 
} 

.container { 
    margin: 25px auto; 
    display: inline-flex; 
} 

.leftbox { 
    height: inherit; 
    display: inline-block; 
    border: 1px solid #D7D2CB; 
    background-color: #FFFFFF; 
    border-radius: 5px; 
    max-width: 550px; 
    margin-right: 18px; 
    align-items: stretch; 
    padding: 15px; 
    width: 100%; 
} 

.rightbox { 
    height: 100%; 
    display: inline-block; 
    border: 1px solid #D7D2CB; 
    background-color: #FFFFFF; 
    border-radius: 5px; 
    align-items: stretch; 
    max-width: 300px; 
    width: 100%; 
    padding: 20px 15px; 
} 

HTML：

<div class="wrapper"> 
    <div class="container"> 
    <div class="leftbox"> 
     There is something here, I am not avoiding it. 
    </div> 
    <div class="rightbox"> 
     Probably something else here but much much much much much much much much much much much much much much much much much much much much much much much much much much much much much bigger. 
    </div> 
    </div> 
</div> 

檢查codepen： https://codepen.io/anon/pen/XRNMMp