gpt4 book ai didi

html - 设置高度 100% 但 css div 不扩展

转载 作者:行者123 更新时间:2023-11-27 23:47:36 26 4
gpt4 key购买 nike

我试验过 CSS 并发现了一个问题。根据我的代码(http://jsbin.com/daguviluwo/1/edit?html,output),我想创建两个带有“float:left”的框,它们会自动将它们的高度调整为相等(=最大高度)。因此,我创建了它们的父对象(id="content")。我认为 parent 的高度应该根据其 child 的最大高度进行调整(但事实并非如此!)。然后,具有属性“height:100%”(红色框)的子项的高度应与该父项的高度相同,并且与具有最大高度的子项(绿色框)相同。但是,它不起作用。

最佳答案

只需将 inline-flexdisplay property value 添加到:

  • #content
  • #leftcontent
  • #rightcontent

同时将 height:autosize 属性值 添加到:

  • #leftcontent
  • #rightcontent

#content {
background-color: grey;
height: 500px;
width: auto;
display: inline-flex;
}
#leftcontent {
height: auto;
background-color: red;
display: inline-flex;
}
#rightcontent {
background-color: green;
height: auto;
display: inline-flex;
}
<body>
<div id="content">
<div id="leftcontent">
<ul>
<li>The height of this div is set to 100</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</div>
<div id="rightcontent">
<h2>This is my first header.</h2>
<p>Content.</p>
<h2>This is my second header.</h2>
<p>Content 2.</p>
</div>
</div>
</body>

注意:使用这种方法,您可以从左/右元素 CSS 中移除 float

关于html - 设置高度 100% 但 css div 不扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29033666/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com