Html CSS子元素的高度问题

我把孩子的身高还给父母时遇到了问题

代码来自MagentoOnePageCheckout站点，我想这是一个css问题

通常结帐从上到下进行。通过使用修改后的css代码，progressbar在页面顶部分开，当前步骤的内容如下所示。遗憾的是，显示内容的子元素被当作溢出元素处理。这就需要为其父元素设置一个定义的高度，这意味着，所有步骤都具有相同的高度，而且看起来非常糟糕。 也许你们知道我可以在css文件中更改什么，以使父元素返回所需的高度。我试着改变显示值或者摆弄位置，但是说实话，我对css的了解还不够深入，不知道我到底在做什么。这是更多的线索和错误

下面是该问题的图像：

代码是：

<ol class="opc" id="checkoutSteps">
    <li id="opc-billing" class="section allow active">
        <div class="step-title"></div>
        <div id="checkout-step-billing" class="step a-item"></div>
    </li>
    <li id="opc-shipping" class="section">
        <div class="step-title"></div>
        <div id="checkout-step-billing" class="step a-item" style="display:none;"></div>
    </li>
</ol>


.opc { position:relative; overflow:hidden; height:970px; padding-top:20px; text-align:center; border:1px solid #BBAFA0;}
.opc li.section { display: inline; }
.opc .step-title,.opc .allow .step-title,.opc .active .step-title { position:relative; text-align:center; border:none; background:none; padding:0; overflow:hidden!important; height:80px; display:inline-block; vertical-align:top; }
.opc .step { padding:30px 20px; position:absolute; border:0; top:100px; left:0; z-index:1; background:#fff; width:605px; height:900px; border-bottom:1px dotted #ccc; border:none; width:643px; text-align:left;}
.opc:first-of-type .active .step{left:0; width: 100%;}

.opc{位置：相对；溢出：隐藏；高度：970px；填充顶部：20px；文本对齐：中心；边框：1px实心35; BBAFA0；}
.opc li.section{display:inline；}
.opc.step title、.opc.allow.step title、.opc.active.step title{位置：相对；文本对齐：居中；边框：无；背景：无；填充：0；溢出：隐藏！重要；高度：80px；显示：内联块；垂直对齐：顶部；}
.opc.step{填充：30px 20px；位置：绝对；边框：0；顶部：100px；左侧：0；z索引：1；背景：fff；宽度：605px；高度：900px；边框底部：1px点#ccc；边框：无；宽度：643px；文本对齐：左侧；}
.opc:类型的第一个.active.step{left:0；width:100%；}

您可以做的是，当用户单击“下一步”按钮时，获取要在jquery中显示的下一个新子容器的高度，并将该高度设置为父容器。您可以使用CSS，但如果内容以不同的屏幕分辨率下降，则提供静态高度可能会有问题。Jquery将在这方面有所帮助

对于初学者来说，这并不是一件好事（因为这样的事情让我越来越不喜欢Magento）。基本上，当前CSS所做的是相对定位

.step title

，绝对定位

.step

。绝对位置的元素在文档中不流动，因此最终发生的是文档将

.step title

元素呈现为彼此紧挨着，但是

.step

不流动，所以它只是从

.opc

顶部伸出100px。为了使

.step

具有其正常尺寸，我们需要找出如何使其不处于

位置：绝对
。我拿着CSS做了这把小提琴：


第一步是删除
位置：绝对
和相关规则以及高度属性：


诀窍是确保所有步骤都位于
.opc
容器的顶部。为此，我们需要将其从流程中移除，为此，我们使用
位置：绝对
（相同的错误代码，不同的应用程序）。这将引起另一个重大问题。我们不知道把这些元素放在哪里。我们最好的办法是给它们每个20%的宽度，假设总是不超过也不少于五步


这是一个经过彻底黑客攻击的解决方案，但根据经验，我知道Magento有时并没有给你很多选择。
谢谢，这对我真的很有帮助！现在一切都好了。
.opc {
    position:relative;
    overflow:hidden;
    padding-top:20px;
    text-align:center;
    border:1px solid #BBAFA0;
}
.opc li.section {
    display: inline;
}
.opc .step-title,
.opc .allow .step-title,
.opc .active .step-title {
    position:relative;
    text-align:center;
    border:none;
    background:none;
    padding:0;
    overflow:hidden!important;
    height:80px;
    display:inline-block;
    vertical-align:top;
}
.opc .step {
    padding:30px 20px;
    border:0;
    background:#fff;
    width:605px;
    border-bottom:1px dotted #ccc;
    border:none;
    width:643px;
    text-align:left;
}
.opc:first-of-type .active .step{
    left:0;
    width: 100%;
    margin-top: 80px; /* same as old title height.  This is for later when we make the steps `position:absolute` */
}

#checkoutSteps li .step-title {
    width: 20%;
    position: absolute;
    top: 20px; /* same as padding */
}
#checkoutSteps li:first-child .step-title {
    left: 0;
}
#checkoutSteps li:first-child + li .step-title {
    left: 20%;
}
#checkoutSteps li:first-child + li + li .step-title {
    left: 40%;
}
#checkoutSteps li:first-child + li + li + li .step-title {
    left: 60%;
}
#checkoutSteps li:first-child + li + li + li + li .step-title {
    left: 80%;
}