要素を上下いっぱいに伸ばしたい

HTML
1  <header>
2    <p class="headerleft">
3      紹介ページです。
4    </p>
5    <ul class="headerright">
6      <li class="li1"><a href="#">ログイン</a></li> 
7      <li class="li2"><a href="#">ログイン</a></li>
8      <li class="li3"><a href="#">ログイン</a></li>
9      <li class="li4"><a href="#">ログイン</a></li>
10    </ul>
11  </header>
12
13  <div class="info_left">
14    <ul>
15      <li class="info1">紹介ページ</li>
16      <li class="info2">紹介ページ</li>
17      <li class="info3">紹介ページ</li>
18      <li class="info4">紹介ページ</li>
19      <li class="info5">紹介ページ</li>
20      <li class="info6">紹介ページ</li>
21      <li class="info7">紹介ページ</li>
22      <li class="info8">紹介ページ</li>
23      <li class="info9">紹介ページ</li>
24    </ul>
25  </div>
26
27  <main>
28    <div>
29      <h1>〇〇について</h1>
30      <p>こんにちは。</p>
31      <img src="img/100views of tokyo37_sample.png">
32    </div>
33    <div>
34      <h1>〇〇について</h1>
35      <p>こんにちは。</p>
36      <img src="img/100views of tokyo38_sample.png">
37    </div>
38    </main>
39

CSS
1body {
2  padding: 0;
3  margin: 0;
4}
5
6header {
7  background: black;
8  color: white;
9  display: flex;
10  justify-content: space-between;
11　position: relative;
12  z-index: 1;
13}
14
15.headerleft {
16  margin-left: 300px;
17}
18
19.headerright {
20  display: flex;
21}
22
23.headerright > li >a {
24  background: gray;
25  text-decoration: none;
26  margin: 0 5px;
27  border-radius: 4px;
28  color: white;
29}
30
31.headerright > li >a:hover {
32  color: red;
33}
34
35li {
36  list-style: none;
37}
38
39.info_left {
40  position: absolute;
41  width: 200px;
42  height: 100%;
43  background: gainsboro;
44  z-index: 2;
45}
46
47main {
48  position: absolute;
49  top: 300px;
50  margin-left: 200px;
51}

.info_leftがついてる<div>要素をすべての要素の上にもってきて、更にページの上下いっぱいまで伸ばしたいです。

このコードでは、
.info_leftがついてる<div>要素が<header>要素の真下から始まり、高さもページの途中で終わってしまいます。

要素の重なりはz-index

<header>と重ねてページ左上から.info_leftの<div>を置くために、<header>のCSSにpozition:relative;

.info_leftの<div>要素をページ下まで伸ばすのにheight:100%;
と指定しましたがうまくいきませんでした。

わかる方よろしくお願いいたします

Lhankor_Mhy

2020/04/11 01:53

>更にページの上下いっぱいまで伸ばしたい mainに絶対配置を使ったレイアウトでは無理じゃないかと思います。全体を見直した方がいいです。

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

回答1件

ベストアンサー

<header>と重ねてページ左上から.info_leftの<div>を置くために、

下記のようなことでしょうか。
※コメントを受けて修正しました。

css
1body {
2  padding: 0;
3  margin: 0;
4　position: relative; /*追加*/
5}
6
7.info_left {
8  position: absolute;
9  top: 0; /*追加*/
10  width: 200px;
11  height: 100%;
12  background: gainsboro;
13  z-index: 2;
14}
15
16main {
17 /*position: absolute;*/
18 /*top: 300px;*/
19  margin-top: 243px; /*追加*/
20  margin-left: 200px;
21}