position: absolute使用時の重なりについて

ブラウザのサイズが変わった場合に、textの文字が下のcontainerに重ならないようにしたいと思っています。
textはわざとはみ出すようにしています。
今のところcontainerにmarginでの調整しか方法が浮かびませんが、ブラウザのサイズが変わった場合重なってしまいます。
textにmarginを付けても効果ありませんでした。
textの高さが変わってもそれに合わせてcontainer同士の間隔を調整できる方法はないのでしょうか？
よろしくお願いします。

<div class="aa"></div>は見やすくする為だけのものなので無視してください。

html
1コード
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5<meta charset="UTF-8">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<title>Hello World</title>
8<link rel="stylesheet" href="css/style.css">
9</head>
10<body>
11  <div class="aa"></div><!-- /.aa -->
12  <div class="container">
13    <div class="content">
14      <div class="inner">
15        <div class="blue">
16          <div class="text">
17            テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
18          </div><!-- /.text -->
19        </div><!-- /.blue -->
20      </div><!-- /.inner -->
21      <div class="red"></div><!-- /.red -->
22    </div><!-- /.content -->
23  </div><!-- /.container -->
24  <div class="container">
25    <div class="content">
26      <div class="inner">
27        <div class="green">
28          <div class="text">
29            テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
30          </div><!-- /.text -->
31        </div><!-- /.green -->
32      </div><!-- /.inner -->
33      <div class="yellow"></div><!-- /.yellow -->
34    </div><!-- /.content -->
35  </div>
36</body>
37</html>

css
1コード
2.aa {
3  height: 300px;
4}
5.content {
6  position: relative;
7}
8
9.inner {
10  width: 1100px;
11  margin: 0 auto;
12}
13
14.blue {
15  background-color: blue;
16  height: 100px;
17  position: absolute;
18  top: -50px;
19}
20.red {
21  background-color: red;
22  height: 200px;
23}
24
25.text {
26  width: 90%;
27  
28}
29
30.green {
31  background-color: green;
32  height: 100px;
33  position: absolute;
34  top: -50px;
35}
36.yellow {
37  background-color: yellow;
38  height: 200px;
39}

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

回答2件

ベストアンサー

メディアクエリで細かく調整

投稿2020/05/10 23:25

退会済みユーザー

総合スコア0

追記しました。文字で縦方向に伸びてしまう要素にposition: absolute;が指定されているのが問題です。
なので
.blue、.greenにposition: relative;を指定し、背景の.redと.yellowにはposition: absolute;を指定するようにしています。

CSS
1.aa {
2  height: 300px;
3}
4.content {
5  position: relative;
6}
7
8.inner {
9  width: 1100px;
10  margin: 0 auto;
11   
12  /* 追加 */
13  max-width: 100%;
14  position: relative;
15  z-index: 1000;
16}
17
18.blue {
19  background-color: blue;
20  min-height: 100px;
21  /* position: absolute; */
22  position: relative;
23  top: -50px;
24
25  /* 追加 */
26  z-index: 1000;
27}
28.red {
29  background-color: red;
30  height: 200px;
31
32  /* 追加 */
33  position: absolute;
34  top: 0;
35  left: 0;
36  width:  100%;
37  height: 100%;
38}
39
40.text {
41  width: 90%;
42}
43
44.green {
45  background-color: green;
46  min-height: 100px;
47  /* position: absolute; */
48  position: relative;
49  top: -50px;
50
51  /* 追加 */
52  z-index: 1000;
53}
54.yellow {
55  background-color: yellow;
56  height: 200px;
57
58  /* 追加 */
59  position: absolute;
60  top: 0;
61  left: 0;
62  width:  100%;
63  height: 100%;
64}

min-heightを使うといかがでしょうか?

CSS
1.blue {
2  background-color: blue;
3  /* height: 100px; */
4  min-height: 100px;
5  position: absolute;
6  top: -50px;
7}
8.red {
9  background-color: red;
10  /* height: 200px; */
11  min-height: 200px;
12}
13
14.text {
15  width: 90%;
16}
17
18.green {
19  background-color: green;
20  /* height: 100px; */
21  min-height: 100px;
22  position: absolute;
23  top: -50px;
24}
25.yellow {
26  background-color: yellow;
27  /* height: 200px; */
28  min-height: 200px;
29}