높이 : 100 %

높이 : 100 %

내부

디스플레이 포함 : 테이블 셀

---

다음은 display: table및 display: table-cellCSS 선언을 사용하는 2 개의 열 마크 업입니다 .

.table {
  display: table;
}

.cell {
  border: 2px solid black;
  vertical-align: top;
  display: table-cell;
}

.container {
  height: 100%;
  border: 2px solid green;
}

<div class="table">
  <div class="cell">
    <p>Text
      <p>Text
        <p>Text
          <p>Text
            <p>Text
              <p>Text
                <p>Text
                  <p>Text
  </div>
  <div class="cell">
    <div class="container">Text</div>
  </div>
</div>

그러나 .container블록은 부모 셀을 세로로 채우지 않습니다. 다음은 JsFiddle의 예입니다. http://jsfiddle.net/MGRdP/2 .

내가 가진 것 | 내가 필요한 것

JS 솔루션을 제안하지 마십시오.

---

%높이 또는 너비 설정에 사용할 때 항상 부모 요소의 너비 / 높이도 설정하십시오.

.table {
    display: table;
    height: 100%;
}

.cell {
    border: 2px solid black;
    vertical-align: top;
    display: table-cell;
    height: 100%;
}

.container {
    height: 100%;
    border: 2px solid green;
    -moz-box-sizing: border-box;
}

<div class="table">
    <div class="cell">
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
    </div>
    <div class="cell">
        <div class="container">Text</div>
    </div>
</div>

---

설정 height: 100%;및 overflow:auto;div 내부.cell

---

table{
   height:1px;
}

table > td{
   height:100%;
}

table > td > .inner{
   height:100%;
}

작업 확인 :

• 크롬 60.0.3112.113, 63.0.3239.84
• Firefox 55.0.3, 57.0.1
• Internet Explorer 11

---

jsFiddle 외에도 브라우저 간 (IE11, Chrome, Firefox)을 사용하기 위해 원하는 경우 추악한 해킹을 제공 할 수 있습니다.

대신 height:100%;넣어 height:1em;온 .cell.

---

이것이 바로 당신이 원하는 것입니다.

HTML

<div class="table">

    <div class="cell">
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
    </div>
    <div class="cell">
        <div class="container">Text</div>
    </div>
</div>

CSS

.table {
    display: table;
    height:auto;
}

.cell {
    border: 2px solid black; 
    display:table-cell;
    vertical-align:top;
}

.container {
    height: 100%;
    overflow:auto;
    border: 2px solid green;
    -moz-box-sizing: border-box;
}

---

테이블 셀 위치를 상대적으로 만든 다음 위쪽 / 오른쪽 / 아래쪽 / 왼쪽 모두 0px로 설정하여 내부 div 위치를 절대적으로 만듭니다.

.table-cell {
  display: table-cell;
  position: relative;
}

.inner-div {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

---

당신 .table과 정의.cell height:100%;

    .table {
        display: table;
        height:100%;
    }

    .cell {
        border: 1px solid black;
        display: table-cell;
        vertical-align:top;
height: 100%;

    }

    .container {
        height: 100%;
        border: 10px solid green;

    }

데모

참고 URL : https://stackoverflow.com/questions/22220698/height-100-for-div-inside-div-with-display-table-cell