css 如何禁止div扩大其父项？

h4cxqtbf 于 2022-12-27 发布在其他

关注(0)|答案(1)|浏览(145)

我有下面的HTML代码：

<body>
 <div id="id1" style="width: 100vw; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; background-color: khaki;">
  <div id="id2" style="width: 100%; height: 100%; grid-row: 1; grid-column: 1;">
   <div id="id3" style="width: 5000px; height: 3000px; background: dodgerblue"></div>
  </div>
  <div id="id4"style="width: 100%; height: 100%; grid-row: 1; grid-column: 2;"></div>
 </div>
</body>

在我的例子中，“id1”div的大小为1860px X 1340px。我希望“id2”和“id4”的大小都为930px 1340px，“id2”会有滚动条，因为“id3”的大小更大。实际上，我得到“id2”的大小为5000px 3000px，“id4”的大小为0px 3000px，滚动条出现在“id1”中，不是“id2”。如果我删除“id3”，“id2”和“id4”具有预期的大小。如何使插入“id3”不改变“id2”和“id3”的大小，而只导致“id2”中出现滚动条？
这是简化的示例。在真实的生活中，“id1”的大小事先并不知道，所以我不能对“id2”和“id4”使用50vw X 100vh大小。

css

来源：https://stackoverflow.com/questions/74925599/how-to-forbid-div-enlarge-its-parent

1条答案

按热度按时间

5f0d552i1#

我不明白你的问题的主体，但我明白"禁止div放大其父项"，是的，有时一个div比其父项大，有一些方法可以解决这个问题：

溢出隐藏解决方案

<div id="parent" style="overflow:hidden">
    <div id="child">
    </div>
</div>

所以你把溢出隐藏样式放在你的父节点上，子节点仍然很大，但是你只能看到父节点视图框内的部分，子节点的其他部分都是隐藏的。

<!DOCTYPE html>
<html>
<head >
<title>Title of the document</title>
</head>

<body>
 <div id="id1" style="width: 100vw; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; background-color: khaki;">
  <div id="id2" style="overflow:hidden;width: 100%; height: 100%; grid-row: 1; grid-column: 1;">
   <div id="id3" style="width: 5000px; height: 3000px; background: dodgerblue"></div>
  </div>
  <div id="id4"style="width: 100%; height: 100%; grid-row: 1; grid-column: 2;"></div>
 </div>
</body>

</html>

溢出滚动

这个解决方案与上面的解决方案类似，但是允许您滚动查看子元素的其余部分。
下面是代码的输出：

<!DOCTYPE html>
<html>
<head >
<title>Title of the document</title>
</head>

<body>
 <div id="id1" style="width: 100vw; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; background-color: khaki;">
  <div id="id2" style="overflow:scroll;width: 100%; height: 100%; grid-row: 1; grid-column: 1;">
   <div id="id3" style="width: 5000px; height: 3000px; background: dodgerblue"></div>
  </div>
  <div id="id4"style="width: 100%; height: 100%; grid-row: 1; grid-column: 2;"></div>
 </div>
</body>

</html>

总结

您必须查看溢出属性，它为您提供了很多选项，告诉您如何处理比父母大的孩子。如果这没有回答您的问题，请在下面评论一个更具体的问题或编辑您的问题。

赞(0）回复(0）举报 2022-12-27

我来回答

css 如何禁止div扩大其父项？

1条答案

溢出隐藏解决方案

溢出滚动

总结

相关问题

热门标签

最新问答