高度：100vh；超过窗口高度，即使最大高度设置为100%[重复]
我试图设置一个渐变覆盖整个页面
这是我的代码：
#login .row div:nth-of-type(1) {
height: 100vh;
max-height: 1%;
background: #642B73; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #C6426E, #642B73); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #C6426E, #642B73); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome
26+, Opera 12+, Safari 7+ */
}<div id="main">
<div class="container-fluid" id="app">
<div id="login">
<div class="row">
<div class="col-md"></div>
</div>
</div>
</div>（我知道我写的最大高度：1%；，请继续阅读）
正如我所说，身高：100% 不起作用，所以我尝试使用各种输入，我看到的是，当我使用像素作为最大高度时，渐变的高度会发生变化，但无论我选择什么输入作为百分比的最大高度，渐变的高度都会保持不变，例如，在我的代码中，我使用了最大高度：1% 和渐变仍然超出了网页的高度。
我检查了开发工具，并应用了max height属性，所以我很困惑到底是怎么回事？
共有2个答案
首先，您需要一个CSS重置来重置您的默认浏览器样式，您可以使用这些关键字css重置2020来搜索它。您将看到几个结果。选择其中之一并在页面的第一次加载中加载这些样式，例如使用此重置。
然后要获得全高度支持，请使用此全局CSS：
html, body {
height: 100%;
}
然后在body标记下为所有页面创建根包装：
<body>
<div id="root">
#root {
height: 100%;
background: #642B73;
background: -webkit-linear-gradient(to right, #C6426E, #642B73);
background: linear-gradient(to right, #C6426E, #642B73);
}
请不要使用vh，真的很烦人，尤其是在移动chrome中。在某些情况下，浏览器无法计算页面的高度。特别是在移动领域。希望对你有帮助。
如果您使用此代码，那么边框上的边距和填充将被删除，并且应该按照您的要求工作。代码如下：
* {
margin: 0;
padding: 0;
}
#login .row div:nth-of-type(1) {
height: 100vh;
max-height: 1%;
background: #642B73; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #C6426E, #642B73); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #C6426E, #642B73); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome
26+, Opera 12+, Safari 7+ */
}<div id="main">
<div class="container-fluid" id="app">
<div id="login">
<div class="row">
<div class="col-md"></div>
</div>
</div>
</div>-
问题内容： 我使用此 CSS将最大高度设置为 谁能给我一个普遍的答案， 和 之间有什么区别？ 问题答案： 这是W3Clink的解释： 以下算法描述了两个属性[min-height和max-height]如何影响’height’属性的使用值： 临时使用的高度是根据上面“计算高度和边距”下的规则计算的（不包括“最小高度”和“最大高度”）。 如果此暂定高度大于“最大高度”，则会再次应用上述规则，但是这次
-
我正在寻找一种CSS方式来嵌入一个响应视频（iframe），这样它的高度总是100%的窗口和宽度适应任何比率允许。我在这件事上所能找到的只是相反的东西（这种技术的变体）。 所以理想的情况是 我甚至不确定这是否可能。最好不要。
-
问题内容： 在设计布局时，我将元素设置为，但是在某些情况下，这失败了，那么应该使用什么？ 要么 嗯，这不是基于意见的，因为每种方法都有其自身的缺陷，那么推荐的方法是什么？为什么？ 问题答案： 如果你想背景图片适用于和，填补了整个浏览器窗口，两者都不是。使用此代替： 我的推理在这里给出（在此我全面解释如何以这种方式应用背景）： 顺便说一句，你为什么要注明原因，并以和分别为，因为无论元素有什么内在的高
-
问题内容： 我正在尝试创建一个画布元素，该元素占用视口宽度和高度的100％。 您可以在我的示例中看到这种情况的发生，但是它正在Chrome和FireFox中添加滚动条。如何防止多余的滚动条，仅将窗口的宽度和高度精确设置为画布的大小？ 问题答案： 为了始终使画布全屏显示宽度和高度，这意味着即使调整了浏览器的大小，也需要在将画布调整为window.innerHeight和window.innerWid
-
问题内容： 我只想有一个侧边栏，该边栏将是窗口高度的100％，但除此之外没有任何作用： 我不想拥有，因为我具有水平可滚动的内容，所以固定的部分将保持不变。 有没有办法做这样的事情，也许有或立场？ 问题答案： tl; dr- 添加到您的CSS。 CSS中的百分比值是从某些已经声明了height的祖先继承而来的。在您的情况下，您需要告知边栏的所有父母都必须保持100％的高度。我假设这是的直接子级。 本
-
我正在尝试在我的应用程序中实现聊天。 我写了一个自动调整离子文本区域如下：视图 CSS 指令 除了滚动，一切都很好。 当我超过100px最大高度时，我无法在ion文本区域中滚动。。。因此，如果我想纠正文本中隐藏的部分，那是不可能的。此外，当我试图滚动它实际上滚动聊天（离子内容）。。。 知道我该怎么解决这个问题吗？