html - CSS子元素的高度问题

Question

我在将 child 的高度返回给其 parent 时遇到了问题。

代码来自 Magento OnePageCheckOut 站点，我猜这是一个 css 问题。

通常结帐顺序是从上到下。使用修改后的 css 代码，进度条在页面顶部分开，当前步骤的内容显示在下面。遗憾的是，显示内容的子元素被作为溢出元素处理。这使得有必要为其父元素设置一个定义的高度，这意味着所有的台阶都具有相同的高度并且看起来很糟糕。 也许你们知道我可以在 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%;}

Answer 1

对于初学者来说，这不会很漂亮(因为这样的事情让我越来越不喜欢 Magento)。基本上，当前 CSS 所做的是相对定位 .step-title 和绝对定位 .step。绝对定位元素不适合文档，所以最终发生的是文档呈现 .step-title 元素，就好像它们彼此相邻一样，但是 .step 不流畅，所以它只是从 .opc 的顶部伸出 100px。为了让 .step 有它们的正常维度，我们需要弄清楚如何让它们不是 position: absolute。我拿了 CSS 做了这个 fiddle :

http://jsfiddle.net/31db2uma/

第一步是删除position:absolute 和相关规则以及高度属性:

http://jsfiddle.net/31db2uma/1/

.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` */
}

技巧是确保所有步骤都位于 .opc 容器的顶部。为此，我们需要将其从流程中移除，为此我们使用 position:absolute(相同的错误代码，不同的应用程序)。这将导致另一个重大问题出现。我们不知道将元素放在哪里。假设总是不会多于不少于五步，我们最好的办法是给它们每个 20% 的宽度。

http://jsfiddle.net/31db2uma/2/

#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%;
}

这是一个非常彻底的黑客解决方案，但我从经验中知道，Magento 有时并没有真正为您提供很多选择。