具有固定 header 和可选面包屑的可滚动 100% 高度主面板
Scrollable 100% height main panel with fixed header and optional breadcrumbs
我有一个棘手的 CSS 问题需要解决。我有一个总是在页面顶部有一个 header 的应用程序——比如说 75px 的高度。在大多数页面上，也会有面包屑 - 高度为 45 像素。当然首页不需要显示面包屑，所以header占的总高度会比其他页面少
我想要做的是让面包屑下方的主视图占据屏幕上 space 的其余部分 - 适用于所有设备高度。此外，我希望此窗格可滚动，而 header/breadcrumbs 始终位于顶部。
这似乎很难做到。
这是一个描述我的意思的例子：
这是我在评论中提到的 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>
当你没有面包屑时，你只需在正文（或容器）中添加一个 class 并使用不同的样式：http://jsfiddle.net/cy83uL28/1/
.container.without-breadcrumbs .content{
height: calc(100vh - 60px);
}
这里有一个 link 的 jsfiddle 演示，如果您想尝试一下：http://jsfiddle.net/cy83uL28/
您需要做的是在页眉和面包屑上使用 position:fixed，使它们浮在其他内容之上并始终停留在页面上。它会允许你想要的功能，没有很多头痛或特殊方法。只需将 position:fixed top:0 left:0 添加到您的 div css.
我有一个棘手的 CSS 问题需要解决。我有一个总是在页面顶部有一个 header 的应用程序——比如说 75px 的高度。在大多数页面上，也会有面包屑 - 高度为 45 像素。当然首页不需要显示面包屑，所以header占的总高度会比其他页面少
我想要做的是让面包屑下方的主视图占据屏幕上 space 的其余部分 - 适用于所有设备高度。此外，我希望此窗格可滚动，而 header/breadcrumbs 始终位于顶部。
这似乎很难做到。
这是一个描述我的意思的例子：
这是我在评论中提到的 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>
当你没有面包屑时，你只需在正文（或容器）中添加一个 class 并使用不同的样式：http://jsfiddle.net/cy83uL28/1/
.container.without-breadcrumbs .content{
height: calc(100vh - 60px);
}
这里有一个 link 的 jsfiddle 演示，如果您想尝试一下：http://jsfiddle.net/cy83uL28/
您需要做的是在页眉和面包屑上使用 position:fixed，使它们浮在其他内容之上并始终停留在页面上。它会允许你想要的功能，没有很多头痛或特殊方法。只需将 position:fixed top:0 left:0 添加到您的 div css.