CSS：如何修复不尊重父级100vh的HTML子元素

问题描述 投票：0回答：1

下面的GIF是我想使用HTML和CSS实现的布局。

enter image description here

下面的代码也代表上面的布局。但是，如果在子元素中填充内容并调整浏览器窗口的大小，则子元素将不遵守主体的视口高度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>

如果内容填满了整个空间并仍然附着在人体的100vh上，并且要使[[alert，section 1和section 2变得可滚动，我要实现的目标]，甚至在浏览器窗口调整大小时也是如此。内容填满后，警报的最大高度应为30%。即使在调整窗口大小时，body也应从不可滚动

下面的GIF是我要使用HTML和CSS实现的布局。下面的代码也代表上面的布局。但是，如果您用内容填充子元素并调整浏览器的大小...
html css flexbox viewport
1个回答
1
投票
简单地将overflow-y属性auto的值添加到要滚动的类中。 auto确保仅在元素的内容超过其高度时才将滚动条添加到元素中]

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.