如何在不指定像素高度的情况下溢出内容 div

Question

我想让内容溢出，但不是整个页面。我的问题是，如果不硬编码这些需要多少水平 space，我无法弄清楚如何使内容高度取决于页脚（以及潜在的其他元素，如页眉）。如何让内容占据尽可能多的水平 space，但仅此而已，然后溢出其余部分？

我的想法是，我可以通过简单地锁定内容高度并使用@media 在给定不同分辨率的情况下创建几个不同的高度来做到这一点。

下面是我制作的一个最小示例，其中我在整个页面上都有溢出。这不是我想要的。我想让内容只占用页面上所有其他元素之后留下的 space，然后溢出其内容（删除 main 上的溢出）。

请指教

在示例中。

body {margin: 0; padding: 0;     
}
main, footer {color: #ffffff;}
main {
    background: #000000;
}
.main {
    max-height: 100%;
}
.content {
    background: blue;
    overflow-y: auto;
    height: auto;
}
.footer {
    background: #616161; 
    height: 100px;
    width: 100%;
}
.boxes {  
    background-color: yellow;
    width: 95%;
    height: 250px;
    margin: 5px;
}

    <main>Main
        <div class="main">
            <section class="content">
                <div class="boxes">1</div>
                <div class="boxes">2</div>
                <div class="boxes">3</div>
            </section>
        </div>
        <footer class="footer">Footer</footer>
    </main>

Answer 1

这是你想要的效果吗？（没有图片问题有点不清楚）

我已经使用 flexbox 和 flex-grow 属性使 .main 元素扩展到页面的所有剩余可用高度。我还给了主体 100vh 高度，然后将 overflow: auto 应用到 .main 元素以使其滚动。

有关 flexbox 的更多信息，请参阅 excellent explanation at CSS Tricks.

body {
    margin: 0;
    padding: 0;
    height: 100vh;   
}
main, footer {
    color: #ffffff;
}

main {
    background: #000000;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

.main {
    flex-grow: 1;
    overflow: auto;
}

.content {
    background: blue;
    overflow-y: auto;
    height: auto;
}
.footer {
    background: #616161; 
    height: 100px;
    width: 100%;
}
.boxes {  
    background-color: yellow;
    width: 95%;
    height: 250px;
    margin: 5px;
}

<main>
        Main
        <div class="main">
            <section class="content">
                <div class="boxes">1</div>
                <div class="boxes">2</div>
                <div class="boxes">3</div>
            </section>
        </div>
        <footer class="footer">Footer</footer>
</main>

Answer 2

我想我找到了解决办法。最后一点是在页脚上做 min-height 。无需指定增长，因为在此示例中只有内容 div 应该增长。

body {
    margin: 0;
    padding: 0;## Heading ##
    height: 100vh;   
}
main, footer {
    color: #ffffff;
}

main {
    background: #000000;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

.main {
    overflow: auto;
}

.content {
    background: blue;
    overflow-y: auto;
    height: auto;
}
.footer {
    background: #616161;
    min-height: 100px;
    width: 100%;

}
.boxes {  
    background-color: yellow;
    width: 95%;
    height: 250px;
    margin: 5px;
}

<main>
    Main
    <div class="main">
        <section class="content">
            <div class="boxes">1</div>
            <div class="boxes">2</div>
            <div class="boxes">3</div>
        </section>
    </div>
    <footer class="footer">Footer</footer>
</main>

如何在不指定像素高度的情况下溢出内容 div

How to do overflow of content div without specifying pixel height

html

css

responsive-design