boxをbodyの下端まで伸ばしたい

前提・実現したいこと

このboxのheightを、
図のようにbodyの一番下まで伸ばしたいです。
](8505b41577f8c2a91f54aefbc95eddf7.png)

・パソコンやスマホで見るので高さは可変であり、横幅によってはタイトルが2行になったりします。h1のタイトルは見た目に大きな変更がなければ自由にいじれます。
・できれば.box {margin-top : calc(100%-タイトルの高さ) } 以外の方法があればうれしいです。
・bodyの高さは画面の高さにして、boxからあふれた分は、スクロールで見れるようにしたいです

該当のソースコード

HTML
1<body>
2  <h1>タイトル</h1>
3  <div class="box"> </div>
4</body>

CSS
1body {height: 100%;}
2.box {height: どうすりゃええねん}
3

よろしくお願い致します。

行動規範の内容に同意します

回答3件

ベストアンサー

HTML
1<div class="wrap">
2  <h1>タイトル</h1>
3  <div class="box">text<div class="long">text</div></div>
4</div>
5

.wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.box {
  border: 1px solid red;
  flex: 1 1 100%;
  overflow-y: scroll;
}
.long {
  padding-top: 100vh;
}
```**動くサンプル：**[https://jsfiddle.net/5L1wczr2/](https://jsfiddle.net/5L1wczr2/)

投稿2018/02/12 06:58

kei344

総合スコア69398

muzumi

2018/02/12 07:12

kei344さん、回答ありがとうございます。すごい！理想通りです！！サンプルまでつけてくださり、すごくわかりやすいです！ flexというのを初めて知ったので、ネットで調べて使えるようにしていきたいとおもいます。本当にありがとうございました！！

行動規範の内容に同意します

うん???
bodyの高さを画面の高さですか???
.boxの高さを画面の高さで固定ではないですか???

lang
1// 読み込み時に高さを取得する。
2window.addEventListener('load', function() {
3
4  function setHeight (el) {
5    const box = document.getElementById('.box');
6    const windowHeight = window.innerHeight;
7    el.style.maxHeight = windowHeight + 'px';
8  }
9
10  setHeight(box);
11
12});

lang
1html,body {
2  height: 100%;
3}
4
5.box {
6  border: 1px solid #000;
7  overflow: auto;
8  box-sizing: border-box;
9}

javascript側でしていることは、スクロールバーを含まないwindowの高さを取得して.boxの高さを固定にします。

投稿2018/02/11 23:37

編集2018/02/11 23:41

退会済みユーザー

総合スコア0

muzumi

2018/02/12 05:25

ShinguYukiさん、回答ありがとうございます。返事が遅れてしまい申し訳ありません。 ShinguYukiさんのscriptを実行してみましたが、私の希望通りには動きませんでした。 bodyの高さは画面の高さにして、スクロールしてもタイトルが上下しないようにしたいです。同時にboxの下端はbodyの下端と重ねたいです。うまく説明できず申し訳ないです(≧◇≦)

行動規範の内容に同意します

footerを伸ばす方法の一つだけどこんなことかしら?

<html>
<head>
<style>
* {
  padding: 0;
  margin: 0;
}
body {
  background-color : blue;
}

.contents {
  background-color : white;
}
.box {
  background-color : blue;
  color: red;
}
</style>
</head>
<body>
<div class="contents">
あ<br/>
あ<br/>
あ<br/>
あ<br/>
</div>
<div class="box">
あ<br/>
あ<br/>
</div>
</body>
</html>

投稿2018/02/11 14:45

退会済みユーザー

総合スコア0

muzumi

2018/02/11 15:00

asahina1979さん回答ありがとうございます<(_ _)>レスポンスの速さに驚きました。私にとってこの方法は新鮮な発見でした。実は、boxには全方位にborderをつけているんです。フッターは今のところ考えておりません。ですのでasahina1979さんの方法は、今回の件では相性が悪いように思われます。質問の仕方に欠落があり、申し訳ないです。

行動規範の内容に同意します

あなたの回答