GIF ниже - это макет, который я хочу получить с HTML и CSS.
Код ниже также представляет макет выше. Однако если вы заполните дочерние элементы содержимым и измените размер окна браузера , дочерние элементы не будут учитывать высоту порта просмотра тела 100vh. Содержимое перекрывает друг друга, и некоторые из детей вытягивают своих братьев и сестер, поэтому viewport из 100vh родителя не соблюдается.
КОД НИЖЕ:
html,
body {
height: 100vh;
background-color: gray;
margin: 0 0 0 0;
}
body {
display: flex;
flex-direction: column;
}
#header {
background-color: greenyellow;
height: 50px;
}
#main {
display: flex;
flex-direction: row;
height: 100%;
}
#section-1_alert-wrapper {
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
}
#section-1 {
background-color: yellow;
height: 100%;
}
#alert {
background-color: red;
color: white;
max-height: 30%;
height: 50%;
}
#section-2 {
background-color: rgb(24, 255, 243);
;
width: 50%;
height: 100%;
}
#footer {
background-color: blue;
color: white;
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./main.css">
<title>Document</title>
</head>
<body>
<header id="header">header</header>
<main id="main">
<div id="section-1_alert-wrapper">
<div id="section-1">Section 1
<br>
<br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur
adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem
expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi,
vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?
</div>
<div id="alert">Alert
<br>
<br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor
sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur
adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem
expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?
</div>
</div>
<div id="section-2">Section 2
<br>
<br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor
sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur
adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem
expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?
</div>
</main>
<footer id="footer">footer</footer>
</body>
</html>
Чего я хочу добиться, если для alert , section 1 и section 2 , чтобы стать способным к прокрутке, как только контент заполняет все их пространство и все еще придерживается 100vh тела даже при изменении размера окна браузера. Максимальная высота оповещения должна составлять 30% после заполнения содержимого. body также должен НИКОГДА не иметь возможности прокрутки даже при изменении размера окна