gpt4 book ai didi

html - 全屏 CSS : 100vh DIVs wholly inside their parent DIV

转载 作者:太空宇宙 更新时间:2023-11-04 06:52:36 25 4
gpt4 key购买 nike

我觉得这差不多好

split 100vh

来自以下代码的布局

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<style>
body {
height: 100vh;
min-height: 100%;
border: 20px dashed gray;
}
.fullheight { min-height: 100%; }
.left, .middle, .right { min-height: 100vh; }
.left { border: 20px dashed red; }
.middle { border: 20px dashed green; }
.right { border: 20px dashed blue; }
</style>
</head>
<body>
<div class="container-fluid fullheight">
<div class="row fullheight">
<div class="left col-xs-4 col-md-4">
<h2 class="text-center">Left</h2>
</div>
<div class="middle col-xs-4 col-md-4">
<h2 class="text-center">Middle</h2>
</div>
<div class="right col-xs-4 col-md-4">
<h2 class="text-center">Right</h2>
</div>
</div>
</div>
</body>

这是 this 的续集问题。

answer是在正确的轨道上。我试图解决最后剩下的问题,即左/中/右框超出了它们自己包含的 DIV。

评论回复为

calc(100vh - 40px)

CSS 文件上下文中的 calc() 是什么意思?无论如何:如何避免垂直滚动条的出现?它的存在意味着我一开始就没有保持在 100vh 以内。

最佳答案

我猜边框将高度推到容器外 40 像素。您可以像这样在 div 中显示边框:

.left, .middle, .right { 
min-height: 100vh;
box-sizing: border-box;
}

或者,正如评论所建议的那样,从高度中减去 40px,例如:

min-height: calc(100vh - 40px);

关于html - 全屏 CSS : 100vh DIVs wholly inside their parent DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52711221/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com