要素を高さと幅を固定して配置したい

背景があってその中にテキストが書かれたボックスが存在するように配置したいです。
※イメージ※　(グレーの部分が背景に代わります)

親要素にrelativeをかけて、子要素にabsoluteをかけても、高さが可変せず、背景のみ可変されます。
ディスプレイサイズに合わせて上下左右大きさを保たせたい場合、cssをどのように変える必要があるのでしょうか。

html
1    <!-- information -->
2    <section class="information">
3        <div class="wrap wrapper">
4            <div class="information_txt">
5                <h3>INFORMATION</h3>
6                <span>サンプルテキスト</span>
7                <p>サンプルテキスト
8                    <br>サンプルテキスト</p>
9                <p>サンプルテキスト</p>
10                <p>サンプルテキスト
11                    <br>サンプルテキスト
12                    <br>サンプルテキスト
13                    <br>サンプルテキスト
14                </p>
15                <div class="view_more">
16                    <a href=""><img src="img/view_more.jpg" alt="view_more"></a>
17                </div>
18            </div>
19        </div>
20    </section>
21    <!-- END information -->

css
1.information {
2    background-image: url(../img/information.png);
3    background-position: center center;
4    background-repeat: no-repeat;
5    background-size: cover;
6    height: 90vh;
7    position: relative;
8    margin-bottom: 1px;
9}
10
11.information .wrap {
12    position: relative;
13    width: 100%;
14    height: 100%;
15}
16
17.information_txt {
18    background-color: #fff;
19    margin-top: 2%;
20    position: absolute;
21    display: block;
22    padding: 3% 5%;
23    margin-left: 50%;
24    width: 50%;
25    text-align: center;
26}
27
28.information_txt h3 {
29    padding: 20px 0;
30}
31
32.information_txt p {
33    line-height: 2em;
34    padding: 20px 0;
35}
36
37.information .view_more {
38    margin-top: 5%;
39    margin-bottom: 5%;
40}
41
42.information .view_more img {
43    margin-left: 3%;
44    margin-right: 3%;
45    width: 30%;
46}

Lhankor_Mhy

2020/07/02 07:24

「子要素にabsoluteをかけても」とのことでしたが、ご提示のコードにabsoluteはないようです。コードのコピペミスではありませんか？

Lhankor_Mhy

2020/07/02 07:26

「ディスプレイサイズに合わせて上下左右大きさを保たせたい場合」とのことですが、これは .information についてそうしたい、という理解で合っていますか？それとも、別の要素の話ですか？

mariueda

2020/07/02 07:29

>「子要素にabsoluteをかけても」とのことでしたが、ご提示のコードにabsoluteはないようです。失礼しました、こちらabsoluteを追記しました。 >.information についてそうしたい、という理解で合っていますか？ .information_txtについて「ディスプレイサイズに合わせて上下左右大きさを保たせたい」です。

Lhankor_Mhy

2020/07/02 07:34

上下左右大きさを保たせた結果、テキストがあふれることについては問題ありませんか？

mariueda

2020/07/02 07:35

併せてテキストについてもあふれないようにできればと思います。

Lhankor_Mhy

2020/07/02 07:39

ということは、余白や文字を小さくしてもよいのですね？

mariueda

2020/07/02 07:43

はい、問題ありません。