부모를 채우기 위해 인라인 블록 요소의 높이 가져 오기

부모를 채우기 위해 인라인 블록 요소의 높이 가져 오기

---

두 개의 항목이있는 컨테이너가 있습니다. 이러한 항목 중 하나는 select요소이므로 sizeHTML을 통해 속성 을 설정해야합니다 . 컨테이너의 다른 항목은 컨테이너에 맞게 높이를 늘려야합니다. 나는 그것을 이해할 수 없다. 선택 상자의 크기를 모르기 때문에 컨테이너의 높이를 명시 적으로 설정하고 싶지 않습니다.

.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>

---

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>

---

당신이 말하는 것을 이해한다면 100 % 높이 열 문제에 직면하고있는 것 입니다. 실제 해결책은 없지만 "핵"이라고 말해서 유감입니다.

여기 에서 이러한 해결 방법 중 몇 가지를 찾을 수 있습니다. 하나의 진정한 레이아웃 방법을 사용하고 싶습니다.

그건 그렇고, 이것은 실험적인 css3 열 속성을 사용하고 싶지 않다고 생각합니다.

---

여기에 대한 답이 나에게 위로를주지 않았기 때문에 나는 가서 진실을 찾았다. 두 상자 사이의 간격을 지정하기 위해 좀 더 많은 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>

코드 펜 확인 : https://codepen.io/anon/pen/XRNMMp

---

의사 요소가 필요한 예 :

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

.cf:after {
	clear: both;
}


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

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

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

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

.col-2 { 
	width:75%;
	border-left:1px solid #c1c1c2;
	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>

참고 URL : https://stackoverflow.com/questions/16404485/getting-inline-block-elements-height-to-fill-the-parent