71564


.hoge2の高さが可変の場合.hoge1のheightを残りでうめたいです。  
display:flexを使った方法は出てくるのですが、flexを使わないでやる方法はないでしょうか？

[code]

    <body>
      <div class="hoge1"></div>
      <div class="hoge2"></div>
    </body>
    
[/code]


CC BY-SA 4.0
2020-10-27T14:05:48.950
71541
2020-10-28T13:01:36.393
2020-10-27T14:11:51.297
32180
32180
question
css
高さが可変の兄弟要素の残りを埋める方法


Flexbox を使わない場合の主要な代替として、 [Grid
layout](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout)
を使用する方法があります。

[code]

    body {
      display: grid;
      grid-auto-columns: 100vw;
      grid-template-rows: 20vh 1fr;
      height: 100vh;
      margin: 0;
    }
    
    div {
      width: 100%;
    }
    
    .hoge1 {
      background: #ffa;
    }
    
    .hoge2 {
      background: #faf;
    }
[/code]

[code]

    <div class="hoge1"></div>
    <div class="hoge2"></div>
[/code]

また、 `height` プロパティにおいて [`calc`
関数](https://developer.mozilla.org/ja/docs/Web/CSS/calc)を用いる方法もあります。Flexbox や
Grid layout に比べると扱いづらいですが、 [CSS
変数](https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties)と併用することでさらに便利な機能になります。

[code]

    body {
      margin: 0;
    }
    
    div {
      width: 100%;
    }
    
    .hoge1 {
      height: 20vh;
      background: #ffa;
    }
    
    .hoge2 {
      height: calc(100vh - 20vh);
      background: #faf;
    }
[/code]

[code]

    <div class="hoge1"></div>
    <div class="hoge2"></div>
[/code]


CC BY-SA 4.0
2020-10-28T13:01:36.393
71564
2020-10-28T13:01:36.393
32986
71541
answer