如何在展开子项时扩展嵌套CSS网格中的父项高度
在展开子项时扩展嵌套CSS网格中的父项高度，可以通过以下步骤实现：
- 使用CSS网格布局：首先，确保父项使用CSS网格布局。在父项的CSS样式中，设置
display: grid;来启用网格布局。 - 定义网格模板：使用
grid-template-rows或grid-template-columns属性来定义网格的行或列。例如，如果希望父项具有两行和两列的网格，可以设置grid-template-rows: auto auto;和grid-template-columns: auto auto;。 - 设置子项的网格位置：对于每个子项，使用
grid-row和grid-column属性来指定其在网格中的位置。例如，可以使用grid-row: 1 / span 2;和grid-column: 1 / span 2;将子项放置在第一行和第一列，并跨越两行和两列。 - 使用过渡效果：为了实现展开子项时扩展父项高度的效果，可以使用CSS过渡效果。在父项的CSS样式中，添加
transition: height 0.3s ease;来定义高度变化的过渡效果。 - 使用JavaScript控制高度：为了实现展开子项时扩展父项高度的动态效果，可以使用JavaScript来控制父项的高度。当展开子项时，通过修改父项的高度属性来实现高度的扩展。
总结： 展开子项时扩展嵌套CSS网格中的父项高度，需要使用CSS网格布局来定义父项和子项的网格位置，并使用过渡效果和JavaScript来控制父项的高度。这样可以实现在展开子项时动态扩展父项的高度，从而适应内容的变化。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云CSS：https://cloud.tencent.com/product/css
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云原生容器服务TKE：https://cloud.tencent.com/product/tke
- 腾讯云CDN加速：https://cloud.tencent.com/product/cdn
- 腾讯云云安全中心：https://cloud.tencent.com/product/ssc
- 腾讯云音视频处理：https://cloud.tencent.com/product/mps
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobile
- 腾讯云对象存储COS：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云腾讯会议：https://cloud.tencent.com/product/tccon
- 腾讯云元宇宙：https://cloud.tencent.com/product/tencentmetaverse
相关·内容
3回答
网格中的图像超出了<div>的原始空间
html、css、css-grid
我使用CSS网格将.grid元素划分为4列和4行。我调整了图像，使其位于第1列和第4行。但是，正如你所看到的，一个人的形象超过了.grid <div>最初的高度，它重叠并超越了它下面的另一个元素。
如何将图像保持在.grid的原始大小，并将其与第1列和第4行对齐？(我也希望它坚持在黑色元素的顶部，但不重叠它)。
.grid {
height: 1000px;
width: 100%;
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 25%
浏览 4提问于2018-05-27得票数 0
回答已采纳
1回答
防止div在网格中重叠
html、css、angular、sass
我试着用css和html做一个网格布局，里面有时间表。这就是我现在的网格：
div元素是重叠的。我如何才能改变红方格移动到下一行的情况，例如：
我的代码：
<ng-container *ngFor="let x of [0,1,2,3,4,5]; let i = index">
<div style="height:70px;min-height: 30px; width: 50px;border: 1px solid black; float:left;">
<div style="heig
浏览 2提问于2022-04-29得票数 0
1回答
嵌套div结构的css网格
html、css、css-grid
我尝试构建一个CSS网格，其中一些条目嵌套在div结构中：
就像这样起作用了：
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-template-rows: 1;
}
.cent {
grid-column: 2;
grid-row: 1;
}
.left {
grid-column: 1;
grid-row: 1;
}
.right {
grid-column: 3;
grid-row: 1;
}
<div cla
浏览 2提问于2018-01-12得票数 3
回答已采纳
1回答
如何将嵌套的DIVs放置在具有可变行高的CSS网格中？
css、css-grid
我需要把4个div容器放在一个2乘2的矩阵中。列的宽度必须相等(因此是固定的)，而行的高度必须适应单元格的内容(因此是可变的)。
只要标记结构看起来像这样，这就很容易做到：
<div class="wrapper">
<div class="cell a1">...</div>
<div class="cell a2">...</div>
<div class="cell b1">...</div>
<div class=&#
浏览 2提问于2021-12-22得票数 0
回答已采纳
1回答
用于页面标题的CSS网格划分
css-grid
我正在使用一个css网格(以前一直在使用flexbox)，并且我正在尝试为我的页面标题设计如何打破css网格。我的网站结构如下：
下面是css：
.site {
column-gap: $sidebar-gap;
display: grid;
grid-template-columns: auto ($sidebar-width); // site structure
grid-template-rows: auto 1fr auto; // sticky header & footer
grid-template-areas
浏览 2提问于2021-12-22得票数 -1
回答已采纳
1回答
如何使用网格/flex在CSS中创建不同大小行的UI？
css、flexbox、css-grid
我需要像图中一样创建一个UI，它将根据传递给它的元素的类(2个视图)来改变它的布局。
第一个布局看起来像是两列，在第一列2 div (a和b)中，一个在顶部，另一个没有间隙，第三div (c)在第二列与顶部对齐。
第二个布局--所有3个div都在一列中，但是来自第二列(C)的div进入它们之间(a和b)。
我尝试使用网格css和2列作为第一个布局(grid-template-columns: auto auto)，将其转换为第二个视图(grid-template-columns: auto)中的一个列，但问题是C块比A长，因此网格行按照最长的div延长，所以A和B之间有很大的差距。有什么想法最
浏览 1提问于2021-05-25得票数 4
1回答
CSS网格布局。可以设置包含徽标的行，也可以不设置
html、css、css-grid
我有这个网格布局。 nav和footer区域占据了第1列和第4列之间的整个空间。 header、main和aside仅占用第2列和第3列之间的空间。 ? header只会有一个徽标。然而，我设计了一个CMS和标志可能会设置，可能不是，取决于用户。默认情况下没有设置徽标，但是当没有设置徽标时，我应该如何处理网格中的空白header区域？ 请查看完整页面视图： :root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
pad
浏览 19提问于2020-06-25得票数 1
回答已采纳
3回答
网格项目未按预期对齐
html、css、css-grid
我试图将item的内容放在中间的列中，但它似乎没有移动。
.home-grid-container {
display: grid;
grid-template-columns: auto;
grid-template-rows: 0.10fr 0.98fr auto;
height: 100vh;
}
.home-header {
grid-column: 1 / span 3;
grid-row: 1 / span 1;
background: #3f51b5;
}
.home-main {
grid-column: 1 / span 3;
gr
浏览 1提问于2017-07-07得票数 2
1回答
不按所有列定义轴网高度
css、css-grid
我创建了一个由3列和4行组成的网格。最后一列完全被一个图像(»..box image«，而不是背景图像)所覆盖，因此该图像及其所在的列不应扩展其他列的高度。
.grid{
display: grid;
grid-template-columns: 25% 25% 1fr;
grid-template-rows: auto 1fr 1fr 50px;
}
.grid .box-image{
grid-column: 3;
grid-row: 1 / 5;
}
.grid .box-image img{
object-fit: cover;
浏览 3提问于2020-01-16得票数 0
1回答
嵌套CSS-网格和图像调整
html、css、css-grid
我正在学习CSS网格(CSS Grid )，我在图像大小调整方面有问题。
为了向您展示这个问题，我创建了一个包含2列的主布局，在第一列中，我创建了另一个网格，在其中我希望在一个列中放置一个图像和一些文本。
请删除html注释，这样您将看到图像。
在代码片段中，红色区域显示图像应该到达的单元格。现在，图像比红色的“容器”(高度:200 it )网格单元格要大，我希望图像在单元格内缩小，这样它就适合在单元格内，并保持高宽比(需要切断左/右或上/下)。对象-适合在图像上不工作。将图像定位为“物体位置: 50% 50%”也很好，但这也不起作用。我目前不知道如何解决这个问题。
.mainlayout
浏览 2提问于2017-03-21得票数 4
2回答
Chrome和Firefox中不同的CSS网格行为
css、google-chrome、firefox、css-grid、chromium
我有一个css网格，有2列和3行。第三行内容并不总是存在，因为有一个角ngif子句。图像出现在跨越这3行的第一列中。尽管如此，我在Chrome (80.0.3987.87，这是我发布的最新稳定版本)和Firefox中得到了两个不同的结果。
是否有一种方法可以控制行，使其行为类似于Firefox，即当图像高度大于第一行高度之和时，第三行就会增长。
.grid {
width:400px;
display:grid;
grid-template-columns: 40px 1fr;
grid-template-rows: minmax(0, auto) minmax(0, au
浏览 4提问于2020-02-05得票数 3
1回答
使用网格布局:如何将box1放在行1列2，将box2放在行2列2？
html、css、css-grid、two-column-layout
我得到的布局如下：
我期望的是：
将box1放入row 1 column 2，将box2放入row2 column 2。
为什么不能将box1和box2中的内容放到row 1 column 2的网格和row 2 column 2的网格中？
如何修复我的css？
html,
body {
height: 1200px;
width: 1000px;
}
.container {
display: grid;
grid-gap: 1.5em;
margin: 1.5em auto;
padding: 0 1.5em;
border: 1px solid
浏览 79提问于2018-06-03得票数 0
1回答
为什么我的HTML结构不能与CSS网格布局一起工作？
html、css、css-grid
我试图了解HTML如何影响规范。我使用的铬金丝雀实验功能启用。
附加的代码按预期工作，但是将nav和搜索放在标头标记内只是为了语义而抛出CSS网格布局。
如果我能够使用CSS网格模块，并且仍然将我的语义头与导航、品牌和搜索包装在我的标题标签中，那么我还缺少什么呢？
html {
box-sizing: border-box;
min-height: 2000px;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.wrapper {
width: 100%;
display: grid;
grid-template-c
浏览 1提问于2015-05-30得票数 1
回答已采纳
1回答
缩小CSS网格单元的宽度，为侧边栏腾出空间
css、flexbox、css-grid
我有一个两列网格布局，我正在努力实现想要的效果。块A是固定大小的。区块B的宽度是固定的，但其高度可以根据内容的不同而变化。C块的高度是固定的。这是当B扩展时它当前的样子：
A A B
A A B
C C C
-->
A A B
A A B
B
C C C
然而，我想要实现的是，一旦B变得比A高，C也应该缩小到A的宽度，这样B就可以自由生长。
A A B
A A B
C C C
-->
A A B
A A B
C C B
这可以通过CSS grid/flexbox/两者的组合来实现吗？我拥有对标记和CSS的完全控制，因此我可以根据需要更改它们。
浏览 17提问于2019-08-13得票数 2
2回答
CSS网格不会折叠单元格以响应img转换
css、css-grid
我有一个包含两个单元格的css grid，包含一些文本和一个图像。使用媒体查询根据屏幕宽度重新定位单元格。
如果max-width = 500px为true，则将图像放在文本的顶部。否则，图像将放置在文本的右侧。我还在媒体查询中使用transform: scale(0.5)缩放图像。
所有这些都工作得很好，除了当图像缩放时，包含它的网格单元仍然保持图像的原始尺寸。换句话说，单元格不会折叠到图像的缩放大小。
如果我不使用transform，而是使用相对width和height修改图像尺寸，网格单元就会折叠。然而，这些尺寸将相对于图像容器，这不是我想要的。
也许transform: scale()
浏览 20提问于2018-08-30得票数 0
回答已采纳
1回答
css网格上的粘滞标题
css、css-grid
我有一个漂亮的响应式css模板使用css网格，我想使这个响应式css网格的标题粘性，但由于标题和导航的设计方式，我不能让它使用固定的位置。
有没有更好的方法来处理一些我可能还没见过的网格属性？
* {
margin: 0;
padding: 0;
}
body {
display: grid;
font-family: sans-serif;
}
a {
text-decoration: none;
color: white;
}
header,
nav {
background: blue;
color: #fff;
position: fixe
浏览 16提问于2018-03-02得票数 9
回答已采纳
2回答
如何避免CSS网格中的图像溢出容器？
css、image、css-grid
我试图在CSS Grid上创建一个高度为100%的页面，但当我将一个图像放入其容器并缩小窗口时，内容会垂直溢出到我的另一个容器上。它只发生在基于100vh的页面上。我努力尝试了网格规则，但什么都不起作用 有人有解决方案吗？ 我当前的代码：https://jsfiddle.net/kxaobqcr/3/ <header>
<div class="type"> <h1>Title</h1> </div>
<div class="nav">
<
浏览 28提问于2019-05-12得票数 0
回答已采纳
2回答
为什么我的CSS网格，菜单没有整行长度？
css、css-grid
如何使“菜单”div取整行长度？我已经定义了整个行，但是它在网格的level3处停止。
我的密码-
.wrapper{
border: 1px solid black;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
grid-template-rows: 40px auto 40px;
/* grid-auto-rows: auto; */
grid-gap: 5px;
background-color: chartreuse;}
.wrapper > div{
font-s
浏览 6提问于2022-01-02得票数 0
2回答
理解css网格中的自动
html、css、css-grid
我对Web开发非常陌生，我正在努力学习CSS网格。在学习CSS网格时，我尝试做一个简单的布局。它有一个页眉部分、一个菜单部分、一个侧边栏部分和一个页脚部分。
我在为第二行定义网格模板行时使用了auto，并将第二行的高度设为100%，这样第二行将完全伸展到第1行和第2行留下的剩余空间中。但它没有那样工作，我正在试图弄清楚为什么第二行不在左边的还押空间中垂直延伸。
下面是conatiner css，其中我将第2行定义为auto，conatiner高度为100%。
.container {
height: 100%;
display: grid;
grid-template-
浏览 2提问于2020-04-02得票数 0
回答已采纳
1回答
设置CSS网格系统以允许不同数量的项目
css、sass、css-grid
我正在尝试使用CSS和SASS设置一个网格系统，允许不同数量的项目在其容器中按比例间隔，请参见下图： ? 网格是4x2的，你可以欣赏，所以我需要找到一种方法来跨越，填充或适合列和行来填充空间，但由于我正在学习这对我来说是一个挑战，我有一个效果很差的codepen，任何建议都会非常感谢。 这是我的代码“代码”： * {
font-family: sans-serif;
font-size: 14px;
color: white;
}
.container {
width: 800px;
margin: 0 auto;
}
.wrapper {
浏览 17提问于2020-09-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
