web-dev-qa-db-ja.com

高さ：表示のある<div>内の<div>の100％：table-cell

以下は、display: tableおよびdisplay: table-cell CSS宣言を使用した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 。

私が持っているもの| 必要なもの

What I haveWhat I need

JSソリューションを提案しないでください。

htmlcsscss-tables
63
Paul Annekov

%を使用して高さまたは幅を設定する場合は、常に親要素の幅/高さも設定します。

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

height: 100%;内のdivにoverflow:auto;および.cellを設定します

26
hd.deman
table{
   height:1px;
}

table > td{
   height:100%;
}

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

動作確認済み：

  • Chrome 60.0.3112.113、63.0.3239.84
  • Firefox 55.0.3、57.0.1
  • Internet Explorer 11
24
Danila Alpatov

JsFiddleに加えて、クロスブラウザー（IE11、Chrome、Firefox）にしたい場合は、ugいハックを提供できます。

height:100%;の代わりに、height:1em;に.cellを配置します。

15
Saar

これはまさにあなたが望むものです：

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;
}
8
Ernest Sawyer

テーブルセルの位置を相対的にし、上/右/下/左をすべて0pxに設定して、内側のdiv位置を絶対にします。

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

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

.tableと.cellheight: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;

    }

デモ （

3
Rohit Azad