CSS：如何修复 HTML Child 不符合 Parent 100vh 的元素
CSS: How To Fix HTML Child Elements Not Respecting Parent 100vh
下面的GIF是我想用HTML和CSS实现的布局。
下面的代码也代表上面的布局。但是，如果您用内容填充 child 元素并 调整浏览器 window 的大小，children 不尊重 body 100vh 的 view-port 身高。内容相互重叠，一些 children 压低了他们的兄弟姐妹，因此 100vh 的 parent 的 viewport 不被尊重。
下面的代码：
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>
如果 警报、第 1 部分和第 2 部分[=45=，我想实现什么] 成为 scroll-able 一旦内容填满他们的整个 space 并且仍然坚持 body 的 100vh 即使在浏览器 window 调整大小。一旦内容填满，警报的 max-height 应该是 30%，它是 space。 body 也应该 永远不会变成 scroll-able 即使 window resize
只需将值为 auto 的 overflow-y 属性 添加到您想要滚动的 类。 auto 确保仅当元素的内容超过其高度时才向该元素添加滚动条
html,
body {
height: 100vh;
background-color: gray;
margin: 0 0 0 0;
}
body {
display: flex;
flex-direction: column;
overflow-y: hidden;
}
#header {
background-color: greenyellow;
height: 10vh;
}
#main {
display: flex;
flex-direction: row;
height: 80vh;
}
#section-1_alert-wrapper {
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
}
#section-1 {
background-color: yellow;
height: 100%;
overflow-y: auto;
}
#alert {
background-color: red;
color: white;
max-height: 30%;
height: 50%;
overflow-y: auto;
}
#section-2 {
background-color: rgb(24, 255, 243);
;
width: 50%;
height: 100%;
overflow-y: auto;
}
#footer {
background-color: blue;
color: white;
height: 10vh;
}
<!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>
下面的GIF是我想用HTML和CSS实现的布局。
下面的代码也代表上面的布局。但是，如果您用内容填充 child 元素并 调整浏览器 window 的大小，children 不尊重 body 100vh 的 view-port 身高。内容相互重叠，一些 children 压低了他们的兄弟姐妹，因此 100vh 的 parent 的 viewport 不被尊重。
下面的代码：
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>
如果 警报、第 1 部分和第 2 部分[=45=，我想实现什么] 成为 scroll-able 一旦内容填满他们的整个 space 并且仍然坚持 body 的 100vh 即使在浏览器 window 调整大小。一旦内容填满，警报的 max-height 应该是 30%，它是 space。 body 也应该 永远不会变成 scroll-able 即使 window resize
只需将值为 auto 的 overflow-y 属性 添加到您想要滚动的 类。 auto 确保仅当元素的内容超过其高度时才向该元素添加滚动条
html,
body {
height: 100vh;
background-color: gray;
margin: 0 0 0 0;
}
body {
display: flex;
flex-direction: column;
overflow-y: hidden;
}
#header {
background-color: greenyellow;
height: 10vh;
}
#main {
display: flex;
flex-direction: row;
height: 80vh;
}
#section-1_alert-wrapper {
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
}
#section-1 {
background-color: yellow;
height: 100%;
overflow-y: auto;
}
#alert {
background-color: red;
color: white;
max-height: 30%;
height: 50%;
overflow-y: auto;
}
#section-2 {
background-color: rgb(24, 255, 243);
;
width: 50%;
height: 100%;
overflow-y: auto;
}
#footer {
background-color: blue;
color: white;
height: 10vh;
}
<!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>