CSS 网格 - 容器高度限制为图像子项的高度
CSS Grid - container height limited to that of image child
我的目标是将容器的高度限制为图像的高度，溢出部分可在 y 轴上滚动。
我试过grid-template-columns: repeat(2, minmax(0, min-content))但没用。
有人能帮帮我吗？这么小的样式错误困扰了我一整天;)
我目前正在处理的事情：
我的目标是：
所以，您希望网格的高度由右栏中图像的高度决定，而不是左栏中文本的高度？在这种情况下，您需要将文本包装在带有 position: absolute; 的元素中，从而从流中删除文本。这样，它的特性就不会影响布局的其余部分。
当您 运行 此代码段时，确保您随后单击“整页”以正确查看效果。
body {
margin: 1em;
}
.g1 {
margin: 1em 0;
display: grid;
grid-template-columns: 1fr auto;
gap: 1em;
}
.w1 {
position: relative;
}
.w2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
}
.w2 p:first-child {
margin-top: 0;
}
.w2 p:last-child {
margin-bottom: 0;
}
header, footer {
background-color: cyan;
padding: 1px 1em;
}
<header>
<p>Before</p>
</header>
<div class="g1">
<div class="w1">
<div class="w2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus velit ut metus pellentesque, non tincidunt erat sagittis. Donec mi justo, venenatis sed urna quis, consectetur vulputate lorem. Cras id ipsum at tellus porttitor egestas sit amet id eros. Phasellus aliquet nunc vel consectetur iaculis. Etiam dapibus, tellus sit amet consequat ultricies, sapien ante molestie tellus, nec tincidunt arcu ante vitae diam. Nam sed eros eu tellus gravida ultrices. Pellentesque vestibulum mauris ante, in vehicula massa lobortis sit amet. Nunc vitae mattis dui, quis porttitor justo. Phasellus sed suscipit sapien, ut tincidunt nibh. Phasellus rhoncus, magna quis faucibus malesuada, ipsum augue convallis diam, eu aliquam metus dolor non ante. Mauris accumsan dolor eu magna venenatis, et rhoncus orci varius. Sed eu urna eu tellus elementum mollis ac sit amet felis. Nam ultricies mi mattis nisi interdum lobortis. Nam tincidunt vehicula pretium.</p>
<p>Suspendisse eget aliquet ligula, at molestie dolor. Etiam scelerisque ac orci at scelerisque. Etiam arcu nisi, condimentum id erat viverra, mollis rutrum arcu. Proin ut mi aliquam, dictum nibh ac, varius massa. Aenean vitae ultrices purus. Phasellus eu tellus pretium, fringilla nunc eget, porttitor massa. Nulla pretium commodo velit id scelerisque. Vivamus faucibus volutpat purus id accumsan. In venenatis viverra vehicula. Phasellus quam leo, luctus nec consectetur vel, tincidunt ultrices urna. Integer tristique rutrum arcu, non placerat sapien luctus ut. Proin scelerisque dui ligula, vehicula maximus dolor scelerisque vitae. Curabitur ornare, lectus non ornare venenatis, odio sapien pulvinar erat, a luctus mi lacus vel ante. Sed eu porttitor erat.</p>
<p>Integer gravida maximus magna non finibus. Etiam mollis, nisl in dignissim interdum, nibh purus fringilla diam, sit amet luctus tortor arcu quis nibh. Maecenas consequat massa et libero luctus, nec gravida erat tincidunt. Praesent sed porttitor turpis. Morbi imperdiet finibus tellus, et dignissim neque vulputate in. Mauris vel vulputate sapien. Duis maximus velit at porta varius. Sed vitae gravida arcu, a condimentum leo. Maecenas elementum enim nibh, sed blandit urna pulvinar sit amet. Pellentesque vel efficitur dolor. Etiam at mollis nibh, ac rutrum nunc. Pellentesque auctor eget lorem ac suscipit. Quisque enim tellus, iaculis sit amet enim in, aliquet malesuada erat. Nullam venenatis at ligula sodales rhoncus. Nulla non velit quis tellus finibus pellentesque scelerisque sed ante.</p>
<p>In rutrum, felis vel fermentum malesuada, turpis ex semper nunc, eu tincidunt mauris nulla vel leo. Ut bibendum arcu urna, nec hendrerit nulla finibus ac. Proin ultrices tortor ac dolor consequat interdum. Curabitur at egestas lorem. In risus massa, faucibus at est sit amet, interdum convallis nulla. Sed ultricies leo lacus, sed pharetra risus porttitor vitae. Nunc tempus urna in dui egestas, eget eleifend lorem finibus. Pellentesque auctor nec est et rutrum. Fusce quis tincidunt lacus. Proin efficitur augue sed eleifend venenatis. Aenean mattis sed odio sit amet lobortis. Vivamus nibh arcu, scelerisque ac purus in, fringilla scelerisque orci.</p>
<p>Praesent volutpat ac justo a luctus. Sed eget orci risus. Sed faucibus turpis id ligula congue facilisis. Nulla facilisi. Aliquam egestas rutrum risus id varius. Etiam ac lacinia mi. Mauris sit amet facilisis arcu. Pellentesque metus nibh, vulputate vel dui fringilla, pellentesque dictum sapien. Praesent interdum nisl at sollicitudin maximus. Morbi ligula odio, hendrerit at risus condimentum, dictum mollis lectus. Sed lacinia rutrum maximus.</p>
<p>Sed orci nisl, cursus lobortis condimentum aliquet, rutrum et metus. Vestibulum sit amet dui mi. Mauris eleifend nisi nec elit euismod tristique. Sed feugiat, quam ac finibus pellentesque, orci dolor auctor nibh, vel pharetra odio mi at magna. Proin sed sapien a sapien consequat dapibus ut quis nulla. Maecenas sit amet feugiat metus, in dictum dolor. Ut sed condimentum dolor, nec congue sapien. Etiam aliquet tellus vitae nibh iaculis consectetur. Curabitur quis fermentum urna. Fusce varius ut erat et cursus. Donec nisl quam, placerat in porta id, ultrices ut diam. Aliquam nec lectus hendrerit arcu maximus egestas nec eu nisl. In id ex in risus vulputate aliquam eu sed ligula. Morbi vel blandit leo, commodo vulputate urna.</p>
<p>Donec facilisis vel lectus vel dapibus. Sed cursus felis vitae porttitor commodo. Quisque et nisi nec metus iaculis facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius elit ut tellus pulvinar elementum in ac nisl. Vivamus sagittis ligula ac egestas semper. Integer at gravida ipsum, et molestie ipsum. Etiam vitae metus ut felis vehicula gravida eget vel turpis. Quisque luctus, nibh a lacinia luctus, augue mauris suscipit ex, pulvinar ornare eros nisi ut urna. Phasellus vitae volutpat justo. Nullam ac elit dolor.</p>
<p>Etiam congue odio nunc, a mattis enim ornare eget. Quisque et sodales quam. Aliquam sollicitudin enim non enim interdum consectetur. Nullam bibendum mi sed massa euismod, pulvinar auctor magna dictum. Donec et lorem finibus, vehicula urna eget, ullamcorper massa. Mauris sem orci, dapibus sed consequat sit amet, malesuada et elit. Integer sit amet massa quam. Cras semper pellentesque urna, eget efficitur odio vestibulum vitae. Maecenas semper, sapien sit amet lobortis venenatis, ligula mauris placerat purus, at congue augue sem id mauris. Etiam gravida elit ut rhoncus varius. Ut nec est metus. Maecenas quis posuere diam. Pellentesque quis nulla interdum, consectetur ipsum eleifend, ultrices libero. Morbi tincidunt mauris at lorem egestas imperdiet quis ut est.</p>
</div>
</div>
<div>
<img src="https://onlinepngtools.com/images/examples-onlinepngtools/body-builder.png">
</div>
</div>
<footer>
<p>After</p>
</footer>
我的目标是将容器的高度限制为图像的高度，溢出部分可在 y 轴上滚动。
我试过grid-template-columns: repeat(2, minmax(0, min-content))但没用。
有人能帮帮我吗？这么小的样式错误困扰了我一整天;)
我目前正在处理的事情：
我的目标是：
所以，您希望网格的高度由右栏中图像的高度决定，而不是左栏中文本的高度？在这种情况下，您需要将文本包装在带有 position: absolute; 的元素中，从而从流中删除文本。这样，它的特性就不会影响布局的其余部分。
当您 运行 此代码段时，确保您随后单击“整页”以正确查看效果。
body {
margin: 1em;
}
.g1 {
margin: 1em 0;
display: grid;
grid-template-columns: 1fr auto;
gap: 1em;
}
.w1 {
position: relative;
}
.w2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
}
.w2 p:first-child {
margin-top: 0;
}
.w2 p:last-child {
margin-bottom: 0;
}
header, footer {
background-color: cyan;
padding: 1px 1em;
}
<header>
<p>Before</p>
</header>
<div class="g1">
<div class="w1">
<div class="w2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus velit ut metus pellentesque, non tincidunt erat sagittis. Donec mi justo, venenatis sed urna quis, consectetur vulputate lorem. Cras id ipsum at tellus porttitor egestas sit amet id eros. Phasellus aliquet nunc vel consectetur iaculis. Etiam dapibus, tellus sit amet consequat ultricies, sapien ante molestie tellus, nec tincidunt arcu ante vitae diam. Nam sed eros eu tellus gravida ultrices. Pellentesque vestibulum mauris ante, in vehicula massa lobortis sit amet. Nunc vitae mattis dui, quis porttitor justo. Phasellus sed suscipit sapien, ut tincidunt nibh. Phasellus rhoncus, magna quis faucibus malesuada, ipsum augue convallis diam, eu aliquam metus dolor non ante. Mauris accumsan dolor eu magna venenatis, et rhoncus orci varius. Sed eu urna eu tellus elementum mollis ac sit amet felis. Nam ultricies mi mattis nisi interdum lobortis. Nam tincidunt vehicula pretium.</p>
<p>Suspendisse eget aliquet ligula, at molestie dolor. Etiam scelerisque ac orci at scelerisque. Etiam arcu nisi, condimentum id erat viverra, mollis rutrum arcu. Proin ut mi aliquam, dictum nibh ac, varius massa. Aenean vitae ultrices purus. Phasellus eu tellus pretium, fringilla nunc eget, porttitor massa. Nulla pretium commodo velit id scelerisque. Vivamus faucibus volutpat purus id accumsan. In venenatis viverra vehicula. Phasellus quam leo, luctus nec consectetur vel, tincidunt ultrices urna. Integer tristique rutrum arcu, non placerat sapien luctus ut. Proin scelerisque dui ligula, vehicula maximus dolor scelerisque vitae. Curabitur ornare, lectus non ornare venenatis, odio sapien pulvinar erat, a luctus mi lacus vel ante. Sed eu porttitor erat.</p>
<p>Integer gravida maximus magna non finibus. Etiam mollis, nisl in dignissim interdum, nibh purus fringilla diam, sit amet luctus tortor arcu quis nibh. Maecenas consequat massa et libero luctus, nec gravida erat tincidunt. Praesent sed porttitor turpis. Morbi imperdiet finibus tellus, et dignissim neque vulputate in. Mauris vel vulputate sapien. Duis maximus velit at porta varius. Sed vitae gravida arcu, a condimentum leo. Maecenas elementum enim nibh, sed blandit urna pulvinar sit amet. Pellentesque vel efficitur dolor. Etiam at mollis nibh, ac rutrum nunc. Pellentesque auctor eget lorem ac suscipit. Quisque enim tellus, iaculis sit amet enim in, aliquet malesuada erat. Nullam venenatis at ligula sodales rhoncus. Nulla non velit quis tellus finibus pellentesque scelerisque sed ante.</p>
<p>In rutrum, felis vel fermentum malesuada, turpis ex semper nunc, eu tincidunt mauris nulla vel leo. Ut bibendum arcu urna, nec hendrerit nulla finibus ac. Proin ultrices tortor ac dolor consequat interdum. Curabitur at egestas lorem. In risus massa, faucibus at est sit amet, interdum convallis nulla. Sed ultricies leo lacus, sed pharetra risus porttitor vitae. Nunc tempus urna in dui egestas, eget eleifend lorem finibus. Pellentesque auctor nec est et rutrum. Fusce quis tincidunt lacus. Proin efficitur augue sed eleifend venenatis. Aenean mattis sed odio sit amet lobortis. Vivamus nibh arcu, scelerisque ac purus in, fringilla scelerisque orci.</p>
<p>Praesent volutpat ac justo a luctus. Sed eget orci risus. Sed faucibus turpis id ligula congue facilisis. Nulla facilisi. Aliquam egestas rutrum risus id varius. Etiam ac lacinia mi. Mauris sit amet facilisis arcu. Pellentesque metus nibh, vulputate vel dui fringilla, pellentesque dictum sapien. Praesent interdum nisl at sollicitudin maximus. Morbi ligula odio, hendrerit at risus condimentum, dictum mollis lectus. Sed lacinia rutrum maximus.</p>
<p>Sed orci nisl, cursus lobortis condimentum aliquet, rutrum et metus. Vestibulum sit amet dui mi. Mauris eleifend nisi nec elit euismod tristique. Sed feugiat, quam ac finibus pellentesque, orci dolor auctor nibh, vel pharetra odio mi at magna. Proin sed sapien a sapien consequat dapibus ut quis nulla. Maecenas sit amet feugiat metus, in dictum dolor. Ut sed condimentum dolor, nec congue sapien. Etiam aliquet tellus vitae nibh iaculis consectetur. Curabitur quis fermentum urna. Fusce varius ut erat et cursus. Donec nisl quam, placerat in porta id, ultrices ut diam. Aliquam nec lectus hendrerit arcu maximus egestas nec eu nisl. In id ex in risus vulputate aliquam eu sed ligula. Morbi vel blandit leo, commodo vulputate urna.</p>
<p>Donec facilisis vel lectus vel dapibus. Sed cursus felis vitae porttitor commodo. Quisque et nisi nec metus iaculis facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius elit ut tellus pulvinar elementum in ac nisl. Vivamus sagittis ligula ac egestas semper. Integer at gravida ipsum, et molestie ipsum. Etiam vitae metus ut felis vehicula gravida eget vel turpis. Quisque luctus, nibh a lacinia luctus, augue mauris suscipit ex, pulvinar ornare eros nisi ut urna. Phasellus vitae volutpat justo. Nullam ac elit dolor.</p>
<p>Etiam congue odio nunc, a mattis enim ornare eget. Quisque et sodales quam. Aliquam sollicitudin enim non enim interdum consectetur. Nullam bibendum mi sed massa euismod, pulvinar auctor magna dictum. Donec et lorem finibus, vehicula urna eget, ullamcorper massa. Mauris sem orci, dapibus sed consequat sit amet, malesuada et elit. Integer sit amet massa quam. Cras semper pellentesque urna, eget efficitur odio vestibulum vitae. Maecenas semper, sapien sit amet lobortis venenatis, ligula mauris placerat purus, at congue augue sem id mauris. Etiam gravida elit ut rhoncus varius. Ut nec est metus. Maecenas quis posuere diam. Pellentesque quis nulla interdum, consectetur ipsum eleifend, ultrices libero. Morbi tincidunt mauris at lorem egestas imperdiet quis ut est.</p>
</div>
</div>
<div>
<img src="https://onlinepngtools.com/images/examples-onlinepngtools/body-builder.png">
</div>
</div>
<footer>
<p>After</p>
</footer>