可滚动的100％高度主面板，带有固定头和可选的面包屑

Question

我有一个难以解决的CSS问题。我有一个应用程序，总是在页面顶部有一个标题 - 比如75px的高度。在大多数页面上，也会有面包屑 - 高度为45像素。当然，主页无需显示面包屑，因此标题占用的总高度将低于其他页面。

我想做的是让面包屑下的主视图占据屏幕上的其余空间 - 适用于所有设备高度。此外，我希望此窗格可滚动，而标题/面包屑始终位于顶部。

这似乎非常棘手。

这是一个描述我的意思的例子：

Answer 1

这是我在评论中提到的calc（）解决方案。如果您不关心ie8并降低它，那么它非常适合您的用例。如果您关心较旧的ie版本，您可以查看IE的表达式。这是演示：

html, body {
    margin: 0;
    padding: 0;
}

header {
    height: 60px;
    background: orange;
}

.breadcrumbs {
    height: 40px;
    background: yellowgreen;
}

.content {
    background: #BADA55;
    height: calc(100vh - 40px - 60px);
    overflow: auto;
}

<header>
    Header
</header>
<div class="breadcrumbs">
    Breadcrumbs
</div>
<div class="content">
    <h1>Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ut et sequi harum repudiandae beatae iure quod similique ipsa natus. Ex quia ducimus in molestias maxime consequuntur quos explicabo at quam voluptate aliquid earum nesciunt voluptatum aperiam iure eum maiores obcaecati iste expedita beatae. Velit vitae animi voluptate harum similique dicta suscipit quo nemo molestias maiores quae omnis obcaecati expedita officia rem tempora qui nostrum impedit magnam molestiae repellendus assumenda fugit recusandae quos iusto inventore labore dignissimos. Maxime aspernatur nam assumenda est iure quas ad incidunt porro ea saepe! Ut laborum eligendi nostrum quidem ullam natus nam tempora sequi magnam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ut et sequi harum repudiandae beatae iure quod similique ipsa natus. Ex quia ducimus in molestias maxime consequuntur quos explicabo at quam voluptate aliquid earum nesciunt voluptatum aperiam iure eum maiores obcaecati iste expedita beatae. Velit vitae animi voluptate harum similique dicta suscipit quo nemo molestias maiores quae omnis obcaecati expedita officia rem tempora qui nostrum impedit magnam molestiae repellendus assumenda fugit recusandae quos iusto inventore labore dignissimos. Maxime aspernatur nam assumenda est iure quas ad incidunt porro ea saepe! Ut laborum eligendi nostrum quidem ullam natus nam tempora sequi magnam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ut et sequi harum repudiandae beatae iure quod similique ipsa natus. Ex quia ducimus in molestias maxime consequuntur quos explicabo at quam voluptate aliquid earum nesciunt voluptatum aperiam iure eum maiores obcaecati iste expedita beatae. Velit vitae animi voluptate harum similique dicta suscipit quo nemo molestias maiores quae omnis obcaecati expedita officia rem tempora qui nostrum impedit magnam molestiae repellendus assumenda fugit recusandae quos iusto inventore labore dignissimos. Maxime aspernatur nam assumenda est iure quas ad incidunt porro ea saepe! Ut laborum eligendi nostrum quidem ullam natus nam tempora sequi magnam.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ut et sequi harum repudiandae beatae iure quod similique ipsa natus. Ex quia ducimus in molestias maxime consequuntur quos explicabo at quam voluptate aliquid earum nesciunt voluptatum aperiam iure eum maiores obcaecati iste expedita beatae. Velit vitae animi voluptate harum similique dicta suscipit quo nemo molestias maiores quae omnis obcaecati expedita officia rem tempora qui nostrum impedit magnam molestiae repellendus assumenda fugit recusandae quos iusto inventore labore dignissimos. Maxime aspernatur nam assumenda est iure quas ad incidunt porro ea saepe! Ut laborum eligendi nostrum quidem ullam natus nam tempora sequi magnam.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ut et sequi harum repudiandae beatae iure quod similique ipsa natus. Ex quia ducimus in molestias maxime consequuntur quos explicabo at quam voluptate aliquid earum nesciunt voluptatum aperiam iure eum maiores obcaecati iste expedita beatae. Velit vitae animi voluptate harum similique dicta suscipit quo nemo molestias maiores quae omnis obcaecati expedita officia rem tempora qui nostrum impedit magnam molestiae repellendus assumenda fugit recusandae quos iusto inventore labore dignissimos. Maxime aspernatur nam assumenda est iure quas ad incidunt porro ea saepe! Ut laborum eligendi nostrum quidem ullam natus nam tempora sequi magnam.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ut et sequi harum repudiandae beatae iure quod similique ipsa natus. Ex quia ducimus in molestias maxime consequuntur quos explicabo at quam voluptate aliquid earum nesciunt voluptatum aperiam iure eum maiores obcaecati iste expedita beatae. Velit vitae animi voluptate harum similique dicta suscipit quo nemo molestias maiores quae omnis obcaecati expedita officia rem tempora qui nostrum impedit magnam molestiae repellendus assumenda fugit recusandae quos iusto inventore labore dignissimos. Maxime aspernatur nam assumenda est iure quas ad incidunt porro ea saepe! Ut laborum eligendi nostrum quidem ullam natus nam tempora sequi magnam.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ut et sequi harum repudiandae beatae iure quod similique ipsa natus. Ex quia ducimus in molestias maxime consequuntur quos explicabo at quam voluptate aliquid earum nesciunt voluptatum aperiam iure eum maiores obcaecati iste expedita beatae. Velit vitae animi voluptate harum similique dicta suscipit quo nemo molestias maiores quae omnis obcaecati expedita officia rem tempora qui nostrum impedit magnam molestiae repellendus assumenda fugit recusandae quos iusto inventore labore dignissimos. Maxime aspernatur nam assumenda est iure quas ad incidunt porro ea saepe! Ut laborum eligendi nostrum quidem ullam natus nam tempora sequi magnam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ut et sequi harum repudiandae beatae iure quod similique ipsa natus. Ex quia ducimus in molestias maxime consequuntur quos explicabo at quam voluptate aliquid earum nesciunt voluptatum aperiam iure eum maiores obcaecati iste expedita beatae. Velit vitae animi voluptate harum similique dicta suscipit quo nemo molestias maiores quae omnis obcaecati expedita officia rem tempora qui nostrum impedit magnam molestiae repellendus assumenda fugit recusandae quos iusto inventore labore dignissimos. Maxime aspernatur nam assumenda est iure quas ad incidunt porro ea saepe! Ut laborum eligendi nostrum quidem ullam natus nam tempora sequi magnam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ut et sequi harum repudiandae beatae iure quod similique ipsa natus. Ex quia ducimus in molestias maxime consequuntur quos explicabo at quam voluptate aliquid earum nesciunt voluptatum aperiam iure eum maiores obcaecati iste expedita beatae. Velit vitae animi voluptate harum similique dicta suscipit quo nemo molestias maiores quae omnis obcaecati expedita officia rem tempora qui nostrum impedit magnam molestiae repellendus assumenda fugit recusandae quos iusto inventore labore dignissimos. Maxime aspernatur nam assumenda est iure quas ad incidunt porro ea saepe! Ut laborum eligendi nostrum quidem ullam natus nam tempora sequi magnam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ut et sequi harum repudiandae beatae iure quod similique ipsa natus. Ex quia ducimus in molestias maxime consequuntur quos explicabo at quam voluptate aliquid earum nesciunt voluptatum aperiam iure eum maiores obcaecati iste expedita beatae. Velit vitae animi voluptate harum similique dicta suscipit quo nemo molestias maiores quae omnis obcaecati expedita officia rem tempora qui nostrum impedit magnam molestiae repellendus assumenda fugit recusandae quos iusto inventore labore dignissimos. Maxime aspernatur nam assumenda est iure quas ad incidunt porro ea saepe! Ut laborum eligendi nostrum quidem ullam natus nam tempora sequi magnam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ut et sequi harum repudiandae beatae iure quod similique ipsa natus. Ex quia ducimus in molestias maxime consequuntur quos explicabo at quam voluptate aliquid earum nesciunt voluptatum aperiam iure eum maiores obcaecati iste expedita beatae. Velit vitae animi voluptate harum similique dicta suscipit quo nemo molestias maiores quae omnis obcaecati expedita officia rem tempora qui nostrum impedit magnam molestiae repellendus assumenda fugit recusandae quos iusto inventore labore dignissimos. Maxime aspernatur nam assumenda est iure quas ad incidunt porro ea saepe! Ut laborum eligendi nostrum quidem ullam natus nam tempora sequi magnam.</p>
    
</div>

当你没有面包屑时，你只需要在主体（或容器）中添加一个类并使用不同的样式：http://jsfiddle.net/cy83uL28/1/

.container.without-breadcrumbs .content{
    height: calc(100vh - 60px);
}

这是一个jsfiddle演示的链接，以防你想玩一点：http://jsfiddle.net/cy83uL28/

Answer 2

您需要做的是使用position：fixed在标题和面包屑上，以便它们浮动在其他内容之上并始终保留在页面上。它将允许您想要的功能，没有很多头痛或特殊方法。只需添加位置：固定顶部：0左：0到你的div css。