将100vh保留在网格容器溢出中的问题
是指在使用CSS网格布局时，当网格容器的内容超出容器的高度时，如何保持网格容器的高度始终为100vh（视口高度）。
解决这个问题的方法是使用CSS属性minmax()结合auto来设置网格容器的行高。具体步骤如下：
- 首先，将网格容器的高度设置为
minmax(100vh, auto)。这样，当网格容器的内容超出视口高度时，容器的高度将自动扩展以适应内容的高度，但不会超过视口高度。 - 接下来，将网格容器的溢出设置为
auto，即overflow: auto。这样，当网格容器的内容超出容器的高度时，会自动显示滚动条，使用户可以滚动查看内容。
这样设置后，无论网格容器的内容是否超出视口高度，都能保持容器的高度为100vh，并且在内容溢出时提供滚动条以便查看全部内容。
这种解决方案适用于各种场景，例如网页布局、应用程序界面等。在腾讯云的产品中，可以使用腾讯云的云服务器（CVM）来搭建网站或应用程序，并使用腾讯云的云数据库（CDB）来存储数据。此外，腾讯云还提供了丰富的云计算产品和服务，如云函数（SCF）、云存储（COS）、人工智能（AI）等，可以根据具体需求选择相应的产品。
更多关于腾讯云产品的信息和介绍，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
3回答
我有一个网格布局与一些部分在100vh的高度。问题是，在这些部分中，当它们大于父容器的100%时，我希望子div溢出，但它们正在扩展其内容，而不是溢出。 </div> </div>.page-holder {
height: calc(
浏览 24提问于2021-02-18得票数 2
回答已采纳
我想知道我的CSS网格的前两行是否可以等于不包括标题的屏幕的高度。标题下面的内容容器已被设置为溢出: auto，但我只希望网格的前两行等于内容容器的高度(不溢出)。我的网格共有3行，基本上，我希望前两行在不溢出的情况下占据容器的整个高度，然后第三行在屏幕上完全不可见，除非<e
浏览 3提问于2020-07-02得票数 1
回答已采纳
1回答
我有一个完整的页面图像，下面是文本内容。我想防止文字溢出容器。i.ytimg.com/vi/xC5n8f0fTeE/maxresdefault.jpg"); position: absolute; width: 100%; position: relative; left: 10vw;
width: 80v
浏览 1提问于2018-03-12得票数 0
回答已采纳
我的谷歌地图的一部分在底部被切断了。我将Google Maps放在CSS网格容器中，但它似乎溢出(?)网格。我目前将Google Maps占据的网格区(google-map)的高度设置为"100vh“。我之前将高度设置为"100%"，但它只占据了浏览器视口的一半。视区越长，底部的G
浏览 13提问于2019-06-13得票数 1
回答已采纳
1回答
当容器的高度超过100vh时，我在实现滚动捕捉点时遇到了问题。我想使用强制捕捉点，但也允许用户在高度大于100vh时滚动。我通过在我希望用户能够滚动的地方添加额外的捕捉点来实现这一点，而不是捕捉到高于100vh的div的顶部。.parent { sc
浏览 9提问于2019-09-10得票数 5
我尝试使用material ui网格系统，但当我使用网格direction='row'时，出现了一个尴尬的空间。 ? const useStyles = makeStyles((theme) => ({ minHeight: '100vh',
border
浏览 11提问于2020-04-06得票数 0
回答已采纳
我有一个height: 100vh;，但我有很多内容，这些内容在小屏幕上溢出到另一个"vh“中，我该如何处理小屏幕上的溢出？
浏览 0提问于2016-01-13得票数 12
回答已采纳
我有一个有3行(页眉，主页，页脚)的网格。 body { font-family: Helvetica; height: 100vh; <div class="main">Main</div><&#
浏览 8提问于2021-01-18得票数 0
回答已采纳
2回答
我想在中创建类似这样的东西不同的颜色显示了网站的不同部分以及它们的背景颜色。垂直线是网格列。如果我使用一个简单的网格容器，我只能在网格内部的div中设置背景颜色，但我希望将背景颜色拉伸到网站的左右边缘。内容将保留在网格内。我找到了一个使用多个网格容器</e
浏览 0提问于2013-05-31得票数 0
回答已采纳
我有一个关于css网格的问题，我用css网格构建了一个带有两个div的容器，我想调整容器到页面中心。我使用以下代码： html{ height : 100vh;body{}
</div>
<link rel="stylesheet"
浏览 14提问于2021-05-01得票数 1
回答已采纳
1回答
以下是HTML和Body的CSS代码 height: 100%; }我想是因为身体上的那些东西从容器里溢出来了？我可以尝试将左<em
浏览 1提问于2022-03-12得票数 0
我有一个带溢出的父div。更改视口高度后(旋转设备或仅更改窗口大小)- child div保持高度。如何使其调整到当前高度(100%的视口)？overflow-y: auto; display: flex; left: 0; height: 100vh; background: blue;} https://jsfi
浏览 35提问于2019-10-05得票数 1
回答已采纳
2回答
不想要的滚动条右边距
、、、、
在我的远程服务器和本地主机上，附在带有overflow-scroll的容器上的滚动条似乎在右边有一个边距，导致背景色显示出来。那么，为什么在调整大小时背景色会显示在滚动条的右边呢？为什么在后台显示暂时修复问题时释放鼠标，除非页面刷新？ margin:0;
padd
浏览 1提问于2019-08-05得票数 3
问题
我们想，为什么不尝试将我们的网格放置在另一个网格中，并通过让容器网格包含周围的行/列来模拟填充来“伪造”填充呢？根据
新的fr单元表示
浏览 2提问于2021-06-30得票数 0
使用CSS Grid，我试图创建一个(有时)比包含元素高度的100%更多的网格。如何才能做到这一点？当创建3行同时使用100%的行时，显式网格显示得很好：
当显式定义从第一行到最后一行到至少一个子级的grid-row时，确实会显示溢出(和滚动条)。这很令人惊讶，因为我预计在没
浏览 180提问于2018-06-27得票数 6
2回答
我有以下CSS网格： display: grid; grid-template-rows1fr; 'a b c ' 'g h i' }
我希望网格有一个固定的高度为100vh</em
浏览 0提问于2017-10-12得票数 8
回答已采纳
我试图使用相对宽度使一个网格视图适合于div，但是当它有太多列时，它总是会释放出它的父容器。我知道使用这样的固定宽度显然可以解决问题，但是如果我稍微调整窗口的大小，网格视图就会再次溢出，因为它有一个特定的宽度。1000px; Height: 300px;">
<asp:GridView id="GridView1" runat="server" />
浏览 4提问于2015-10-10得票数 1
回答已采纳
整个网站都采用网格布局-基本页眉、主页和页脚：这样做的目的是将页脚设置到屏幕底部，并在内容中添加空格，如果页面上没有像这样的内容，那么：为了演示起见，我在本页中使用了50 of的页边距但是，例如，如果博客帖子大于100 on，那么页脚仍然应该出现在底部-当然，没有空格：用户需要滚动才能看到页面底部的页脚。实现这种行为的“最佳实践”(-way)是什么(最好没有JS(?))？可能想查看网页结构的人的一些
浏览 3提问于2021-09-17得票数 1
回答已采纳
1回答
我正在用Bootstrap在我的一个应用程序上使用Kendo Grid。除了Kendo Grid之外，其他所有内容都会自动调整大小。我该怎么做才能让网格自动调整大小？
浏览 1提问于2016-01-20得票数 0
我不使用Bootstrap或reset.css/reboot.css，我试图用通用的css构建一个网站。我正在做一些非常基本的事情，但是我得到了“这个元素导致一个元素溢出”--实际上到处都是。我已经很长一段时间没有在没有任何css框架的情况下完成布局了，我也找不到关于这个问题的任何东西。即使是br也会导致溢出！这是什么？我没有看到任何蝎子，一切看上去都和我预期的一样。我仔细检查了一下，发现图像是造成这种情况的原因。borde
浏览 9提问于2022-01-02得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
