制作可随内容增长的全屏部分

Question

我想制作占据整个屏幕的部分，但当内容需要时，也可以进一步增长

我使用的是min-height属性，但它似乎不起作用:它确实占用了整个高度空间，但即使内容溢出，它也不会增长。不幸的是，我不能使用flexbox来实现这一点，因为需要为每个元素设置大小(所以我不能依赖它来居中我的元素)。

html：

<section id="MusicStyle">
    <div class="parchment parchment-style">
        <h1>Music style</h1>
        <ul>
            <li>Style 1</li>
            <li>Style 2</li>
            <li>Style 3</li>
            <li>Style 4</li>
        </ul>
    </div>

    <div class="parchment parchment-hardware">
        <h1>Hardware</h1>
        <p>I am using the Hercules something pro </p>
        <p>I need a jack audio input to connect to your sound system. Tests can be done for free to check if I can work with your setup.</p>
    </div>

    <div class="parchment parchment-pictures">
        <h1>Previous parties</h1>
        <div class="parties">
            <img src="https://images.unsplash.com/photo-1508854806753-7878ec6a6632?w=500&q=90" width="500"/>
            <img src="https://images.unsplash.com/photo-1543320777-d4102f7e1aa3?w=500&q=90" width="500"/>
            <img src="https://images.unsplash.com/photo-1524368535928-5b5e00ddc76b?w=500&q=90" width="500"/>
            <img src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=500&q=90" width="500"/>
        </div>
    </div> 
</section>

Scss：

#MusicStyle {
    min-height           : auto !important;
    background           : black;
    text-align           : center;

    .parchment {
        display: block;
        width: 25%;
        margin: 2em auto 2em auto;
        padding: 1em 2em 1em 2em;
        /** Setting bg and color stuff **/
    }

    /**
     * Doing the responsiveness by hands bother me since it was pretty auto with flexbox
     **/
    .parchment-style {
        width: 383px !important;

        @media (max-width: 1500px) {
            width: 25% !important;
        }

        @media (max-width: 1200px) {
            width: 30% !important;
        }

        @media (max-width: 900px) {
            width: 40% !important;
        }

        @media (max-width: 550px) {
            width: 60% !important;
        }
    }

    .parchment-hardware {
        width: 383px !important;

        p {
            margin-top: 1em;
            &:first-of-type {
                margin-top: 0;
            }
        }

        @media (max-width: 1500px) {
            width: 35% !important;
        }

        @media (max-width: 830px) {
            width: 40% !important;
        }

        @media (max-width: 650px) {
            width: 65% !important;
        }
    }

    .parchment-pictures {
        width: 50% !important;

        @media (max-width: 1200px){
            width: 70% !important;           
        }

        @media (max-width: 830px){
            width: 90% !important;           
        }

        .prestations {
            margin-bottom: 2em;
        }
    }

    div {
        h1 {
            font-size: 4em;
        }

        ul {
            padding   : 0;
            margin: 2em 0 2em 0;
            list-style: none;

            li  {
                padding: 0;
                margin : 0;
            }
        }
    }
}

parties div是一个用Slick库制作的幻灯片，所以不需要一次显示所有的图片。

这段代码似乎可以在Firefox上运行，但在Chrome上，图片幻灯片会在我的下一个部分溢出，当前的幻灯片仍然占据一个视图高度。我甚至还没试过IE/Edge ...

值得一提的是，这段代码真的很难看，我想要正确地完成它。

Answer 1

也许可以尝试将宽度和高度设置为自动，同时设置最小高度和最小宽度？