搜索
搜索

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

claOnline 发表于 Dev
18
在线客服

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

在此处输入图片说明

下面的代码也代表了上面的布局。但是，如果您用 content 填充子元素并调整浏览器窗口的大小，则子元素不会尊重主体的视口高度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也应该不会成为滚动能够即使在窗口大小调整

西尔弗曼42

只需将overflow-y带有值的属性添加auto到您想要可滚动的类。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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

强制元素包含到 100vh

JQuery 获取元素 .height() 然后减去 100vh？

固定位置元素可替代100vh？

Height 100vh - JavaScript 中其他元素的高度

在布局中将导航与粘性位置与 100vh（子）body 元素相结合？

即使父级的高度设置为`100vh`，子元素也不会包含在视口高度中

IE 11：最小高度为100vh的元素将导致滚动条

CSS`height：calc（100vh）;`vs`height：100vh;`

CSS 100vh未将div设置为100％高度

<html>，<body>，padding，margin，100vh和calc（）

如何使用CSS在iOS上访问真实的100vh

如何使用100vh创建网页以响应

如何使用jQuery向下滚动100vh？

100vh滚动后如何切换课程

即使没有孩子，如何使div 100vh？

min-height 父元素的子元素不尊重父元素的 100% 高度

如何从 HTML 中的父元素转发子元素？

将HTML和BODY选择器的样式设置为高度：100％；与使用100vh

如何将HTML父元素的边框适合CSS转换后的子元素？

调整窗口大小后重新计算 CSS @keyframes（100vw 和 100vh）

CSS样式，100％/ 100vh不会覆盖通过视图的高度

低于100vh的html的空白会覆盖背景图片，导致滚动条

html将高度视频裁剪为100vh，将视频裁剪为全屏

html点击，除了元素AND子元素

没有子元素的Javascript元素html

在父级中保持100vh高度，并发生溢出

高度：当父项的高度为100vh时，自动在flex项目上

扩展其他div时背景不覆盖100vh

标题部分中的 href 不充当链接，并且垂直高度不是 100vh

TOP 榜单

  1. 1

    Linux的官方Adobe Flash存储库是否已过时？

  2. 2

    用日期数据透视表和日期顺序查询

  3. 3

    应用发明者仅从列表中选择一个随机项一次

  4. 4

    Java Eclipse中的错误13，如何解决？

  5. 5

    在Windows 7中无法删除文件（2）

  6. 6

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  7. 7

    套接字无法检测到断开连接

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    有什么解决方案可以将android设备用作Cast Receiver？

  10. 10

    Mac OS X更新后的GRUB 2问题

  11. 11

    ggplot：对齐多个分面图-所有大小不同的分面

  12. 12

    验证REST API参数

  13. 13

    如何从视图一次更新多行（ASP.NET - Core）

  14. 14

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  15. 15

    计算数据帧中每行的NA

  16. 16

    检索角度选择div的当前值

  17. 17

    离子动态工具栏背景色

  18. 18

    UITableView的项目向下滚动后更改颜色，然后快速备份

  19. 19

    VB.net将2条特定行导出到DataGridView

  20. 20

    蓝屏死机没有修复解决方案

  21. 21

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

热门标签

归档