CSS 网格高度没有按我的预期工作，我在哪里搞砸了？

Question

我目前正在学习 CSS 网格，我的任务是通过将其分解为网格来制作这张卡片。 附件是我想要制作的网格的图片。

实际上有一个更大的网格（css 中的 profile-grid），所有这些卡片都排成一行，这个更大的网格的高度为 255px。 我想让卡片和卡片内的网格跟随这个 255px，我设法让卡片本身的高度正确，但不是内部网格的高度。 内部网格本身由 2 行组成，其中第一行是图片，高度为 150px，第二行设置为 1fr，但我无法将内部网格的高度设置为 255px。 有没有我搞砸的部分？

https://i.stack.imgur.com/g9Eh6.png

jsFiddle链接如下： https://jsfiddle.net/40tnwd1o/

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); body { font-family: roboto; } p { display: block; margin: auto; }.profile-card { margin-top: 0px; width: 150px; height: 255px; border: none; box-shadow: 0px 0px 5px 3px rgba(73, 73, 73, 0.301); }.profile-grid { display: grid; grid-template-columns: 100%; grid-template-rows: 150px 1fr; }.social-ava { width: 100%; height: 100%; background-color: gray; transition: opacity 0.15s; }.social-ava:hover { opacity: 0.8; }.social-text { height: 100%; padding: 8px; }.social-name { margin-top: 0px; cursor: pointer; transition: color 0.15s; }.social-name:hover { color: rgb(52, 98, 167); }.mutual-grid { display: grid; grid-template-columns: 20px 1fr; margin-top: 6px; align-items: center; }.mutual-pic { width: 20px; height: 20px; background-color: gray; border-radius: 10px; cursor: pointer; }.mutual-friend { font-size: 12px; color: rgb(80, 80, 80); cursor: pointer; }.mutual-friend:hover { text-decoration: underline; }.social-add { margin-top: 6px; padding: 8px 16px; border: none; border-radius: 4px; color: white; background-color: rgb(25, 118, 240); font-size: 12px; cursor: pointer; transition: opacity 0.1s; }.social-add:hover { opacity: 0.8; }

 <:-- profile card start --> <div class="profile-card"> <:-- profile grid start --> <div class="profile-grid"> <:-- row 1: picture start --> <div class="image-container"> <div class="social-ava"></div> <!-- placeholder for profile picture --> </div> <!-- row 1: picture end --> <!-- row 2: info start --> <div class="social-text"> <p class="social-name"><strong>Name</strong></p> <div class="mutual-grid"> <!-- grid for mutual friends info start --> <div class="mutual-pic"></div> <!-- placeholder for mutual's profile picture --> <p class="mutual-friend">2 mutual friends</p> </div> <!-- grid for mutual friends info end --> <button class="social-add">Add Friend</button> </div> <!-- row 2: info end --> </div> <!-- profile grid end --> </div> <!-- profile card end -->

Answer 1

i.stack.imgur.com/g9Eh6.png 这是profile-grid的高度，而不是profile-card的高度。 255px is set on profile-card ..

您必须在profile-grid上添加height:100%

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); body { font-family: roboto; } p { display: block; margin: auto; }.profile-card { margin-top: 0px; width: 150px; height: 255px; border: none; box-shadow: 0px 0px 5px 3px rgba(73, 73, 73, 0.301); }.profile-grid { display: grid; height: 100%; grid-template-columns: 100%; grid-template-rows: 150px 1fr; }.social-ava { width: 100%; height: 100%; background-color: gray; transition: opacity 0.15s; }.social-ava:hover { opacity: 0.8; }.social-text { height: 100%; padding: 8px; }.social-name { margin-top: 0px; cursor: pointer; transition: color 0.15s; }.social-name:hover { color: rgb(52, 98, 167); }.mutual-grid { display: grid; grid-template-columns: 20px 1fr; margin-top: 6px; align-items: center; }.mutual-pic { width: 20px; height: 20px; background-color: gray; border-radius: 10px; cursor: pointer; }.mutual-friend { font-size: 12px; color: rgb(80, 80, 80); cursor: pointer; }.mutual-friend:hover { text-decoration: underline; }.social-add { margin-top: 6px; padding: 8px 16px; border: none; border-radius: 4px; color: white; background-color: rgb(25, 118, 240); font-size: 12px; cursor: pointer; transition: opacity 0.1s; }.social-add:hover { opacity: 0.8; }

 <:-- profile card start --> <div class="profile-card"> <:-- profile grid start --> <div class="profile-grid"> <:-- row 1: picture start --> <div class="image-container"> <div class="social-ava"></div> <!-- placeholder for profile picture --> </div> <!-- row 1: picture end --> <!-- row 2: info start --> <div class="social-text"> <p class="social-name"><strong>Name</strong></p> <div class="mutual-grid"> <!-- grid for mutual friends info start --> <div class="mutual-pic"></div> <!-- placeholder for mutual's profile picture --> <p class="mutual-friend">2 mutual friends</p> </div> <!-- grid for mutual friends info end --> <button class="social-add">Add Friend</button> </div> <!-- row 2: info end --> </div> <!-- profile grid end --> </div> <!-- profile card end -->

Answer 2

我无法弄清楚这里到底出了什么问题，因为配置文件卡实际上似乎是255px的高度，但是，我假设你的意思是.profile-grid本身：

您的问题是，虽然卡片元素正确填充了其空间，但网格却没有。 为此，您必须使其完全填满其父元素。 简单地：

.profile-grid{
    height:100%;
}

仅此一项似乎就可以解决您的问题，但也要考虑到您的.social-text div 有一些填充，这会导致其内容 go 在网格行之外。

为此，您必须将其缩小 16 像素或将第二行放大 16 像素。 尽管如此，仍然不需要实际实现这一点。

最终代码（仅适用于第一个实现）：

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); body { font-family: roboto; } p { display: block; margin:auto; }.profile-card { margin-top: 0px; width:150px; height:255px; border:none; box-shadow: 0px 0px 5px 3px rgba(73, 73, 73, 0.301); }.profile-grid { display:grid; height:100%; grid-template-columns: 100%; grid-template-rows:150px 1fr; }.social-ava { width:100%; height:100%; background-color: gray; transition: opacity 0.15s; }.social-ava:hover { opacity:0.8; }.social-text { height:100%; padding: 8px; }.social-name { margin-top:0px; cursor: pointer; transition: color 0.15s; }.social-name:hover { color:rgb(52, 98, 167); }.mutual-grid { display: grid; grid-template-columns: 20px 1fr; margin-top:6px; align-items: center; }.mutual-pic { width:20px; height:20px; background-color: gray; border-radius:10px; cursor: pointer; }.mutual-friend { font-size: 12px; color:rgb(80, 80, 80); cursor: pointer; }.mutual-friend:hover { text-decoration: underline; }.social-add { margin-top:6px; padding:8px 16px; border:none; border-radius: 4px; color:white; background-color: rgb(25, 118, 240); font-size:12px; cursor: pointer; transition: opacity 0.1s; }.social-add:hover { opacity:0.8; }

 <.DOCTYPE html> <html> <head> <link rel="stylesheet" href"style:css"> </head> <body> <:-- profile card start --> <div class="profile-card"> <:-- profile grid start --> <div class="profile-grid"> <:-- row 1: picture start --> <div class="image-container"> <div class="social-ava"></div> <!-- placeholder for profile picture --> </div> <!-- row 1: picture end --> <!-- row 2: info start --> <div class="social-text"> <p class="social-name"><strong>Name</strong></p> <div class="mutual-grid"> <!-- grid for mutual friends info start --> <div class="mutual-pic"></div> <!-- placeholder for mutual's profile picture --> <p class="mutual-friend">2 mutual friends</p> </div> <!-- grid for mutual friends info end --> <button class="social-add">Add Friend</button> </div> <!-- row 2: info end --> </div> <!-- profile grid end --> </div> <!-- profile card end --> </body> </html>