Question

有一个装箱的时间轴，其中包含5列。到目前为止，它很好。但是，当添加更多列时，由于其父容器的高度溢出，该列会被拉伸。

<section id="timeline">
    <div class="demo-card-wrapper">
        <div class="demo-card demo-card--step1">
            <div class="head">
                <div class="number-box">
                    <span>01</span>
                </div>
                <h2><span class="small">Subtitle</span> Technology</h2>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
                <img src="http://placehold.it/1000x500" alt="Graphic">
            </div>
        </div>

        <div class="demo-card demo-card--step2">
            <div class="head">
                <div class="number-box">
                    <span>02</span>
                </div>
                <h2><span class="small">Subtitle</span> Confidence</h2>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
                <img src="http://placehold.it/1000x500" alt="Graphic">
            </div>
        </div>

        <div class="demo-card demo-card--step3">
            <div class="head">
                <div class="number-box">
                    <span>03</span>
                </div>
                <h2><span class="small">Subtitle</span> Adaptation</h2>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
                <img src="http://placehold.it/1000x500" alt="Graphic">
            </div>
        </div>

        <div class="demo-card demo-card--step4">
            <div class="head">
                <div class="number-box">
                    <span>04</span>
                </div>
                <h2><span class="small">Subtitle</span> Consistency</h2>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
                <img src="http://placehold.it/1000x500" alt="Graphic">
            </div>
        </div>

        <div class="demo-card demo-card--step5">
            <div class="head">
                <div class="number-box">
                    <span>05</span>
                </div>
                <h2><span class="small">Subtitle</span> Conversion</h2>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
                <img src="http://placehold.it/1000x500" alt="Graphic">
            </div>
        </div>

        <div class="demo-card demo-card--step6"> <!-- Added this -->
            <div class="head">
                <div class="number-box">
                    <span>05</span>
                </div>
                <h2><span class="small">Subtitle</span> Conversion</h2>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
                <img src="http://placehold.it/1000x500" alt="Graphic">
            </div>
        </div>    


        <div class="demo-card demo-card--step7"> <!-- And this  -->
            <div class="head">
                <div class="number-box">
                    <span>05</span>
                </div>
                <h2><span class="small">Subtitle</span> Conversion</h2>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
                <img src="http://placehold.it/1000x500" alt="Graphic">
            </div>
        </div>    
    </div>
</section>

Here's the original demo

问题是该容器可能包含100多个列，因此它必须能够存储无限数量的列。

Here's the modified demo with 2 added columns.

我尝试通过将高度设置为100％（自动）来发挥高度，但是这些都无济于事。

问题是，为什么将高度设置为100％无效？

Answer 1

您必须在CSS中调整$ item变量以匹配时间轴中的实际项目：

$items: 7;

请参阅此处：https://codepen.io/anon/pen/OeoqJq

Answer 2

不幸的是，这不能通过纯CSS来完成，因此我不得不通过一些JavaScript来调整列顺序和容器高度。该逻辑已从原始源文件中提取。

@GeneratedValue(strategy=GenerationType.IDENTITY)

不能将伸缩柱容器推到最大高度

2 个答案: