CSS：是否可以在高度为auto的div中嵌入高度为100％的div？

I'm trying to use a div as a divider inside of another div and it's not showing up. I figured if I set the height on the divider div to 100% it would automatically adjust to the height of the containing div, which I have set to "auto" for the height.

我正在尝试使用div作为另一个div中的分隔符并且它没有显示出来。我想如果我将分频器div上的高度设置为100％，它会自动调整到包含div的高度，我已经为高度设置为“auto”。

If I change the height of the containing div to an exact pixel amount the dividing div kicks in and works fine. The reason I want it to adjust automatically is because there will be multiple instances of the containing div with different content which will make the height vary from one to the other so just setting an exact pixel amount for all of them won't be sufficient.

如果我将包含div的高度更改为精确的像素数量，则分割div会启动并正常工作。我希望它自动调整的原因是因为包含div的多个实例具有不同的内容，这将使高度从一个到另一个变化，因此仅为所有这些设置精确的像素数量是不够的。

Here's the CSS I created

这是我创建的CSS

.container{
    width:600px;
    height:auto;
    margin:auto;
    float:left;
    display:block;
    }
 #divider{
    width:4px;
    height:100%;
    float:left;
    display:block;
    }

Is my coding wrong or is there something else at play that makes this not possible? Thanks in advance for your assistance.

我的编码是错误的还是在游戏中还有其他东西使得这不可能？提前感谢你的帮助。

1 个解决方案

#1

100% is relative to the parent. Try making it 100 vh. Codepen

100％是相对于父母的。尝试制作100 vh。 Codepen

#divider{
  width:4px;
  height:100vh;
  float:left;
  display:block;
}