CSS 子元素的高度问题

Height Problems with CSS Child element

我在将子项高度返回给其父项时遇到了问题。

代码来自 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%;}

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

对于初学者来说,这不会很漂亮(因为这样的事情让我越来越不喜欢 Magento)。基本上当前的 CSS 所做的是相对定位 .step-title 和绝对定位 .step。绝对定位的元素在文档中不流畅,所以最终发生的是文档呈现 .step-title 元素,就好像它们彼此相邻,但 .step 不流畅,所以它只是从 .opc 的顶部伸出 100 像素。为了让 .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 有时并没有真正给你很多选择。