堆栈内存溢出
  繁体   English   中英

修复了 header，带有可滚动内容的页脚

[英]Fixed header, footer with scrollable content

 原文  2010-11-01 14:26:16  9   7    html/ css

问题描述

如何修复 header，带有可滚动内容的页脚？ 像这个页面这样的东西。 我可以查看源代码以获取 CSS，但我只想知道最小的 CSS 和 HTML 我需要让它工作。

在此处输入图像描述

7 个解决方案

解决方案1
 141 已采纳  2010-11-01 14:32:44

像这样的东西

<html>
  <body style="height:100%; width:100%">
    <div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> 
    </div>
  </body>
</html>

解决方案2
 71  2014-01-16 17:02:42

如果您的目标是支持灵活框的浏览器，您可以执行以下操作.. http://jsfiddle.net/meyertee/AH3pE/

HTML

<div class="container">
    <header><h1>Header</h1></header>
    <div class="body">Body</div>
    <footer><h3>Footer</h3></footer>
</div>

CSS

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

header {
    flex-shrink: 0;
}
.body{
    flex-grow: 1;
    overflow: auto;
    min-height: 2em;
}
footer{
    flex-shrink: 0;
}

更新：
有关灵活框的浏览器支持，请参阅“我可以使用吗”。

解决方案3
 57  2017-04-30 19:01:38

方法 1 - flexbox

它适用于已知和未知的高度元素。 确保将外部 div 设置为height: 100%; 并重置body上的默认margin 。 请参阅浏览器支持表。

js小提琴

 html, body { height: 100%; margin: 0; } .wrapper { height: 100%; display: flex; flex-direction: column; } .header, .footer { background: silver; } .content { flex: 1; overflow: auto; background: pink; }
 <div class="wrapper"> <div class="header">Header</div> <div class="content"> <div style="height:1000px;">Content</div> </div> <div class="footer">Footer</div> </div>

方法 2 - CSS 表

对于已知和未知的高度元素。 它也适用于包括 IE8 在内的传统浏览器。

js小提琴

 html, body { height: 100%; margin: 0; } .wrapper { height: 100%; width: 100%; display: table; } .header, .content, .footer { display: table-row; } .header, .footer { background: silver; } .inner { display: table-cell; } .content .inner { height: 100%; position: relative; background: pink; } .scrollable { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: auto; }
 <div class="wrapper"> <div class="header"> <div class="inner">Header</div> </div> <div class="content"> <div class="inner"> <div class="scrollable"> <div style="height:1000px;">Content</div> </div> </div> </div> <div class="footer"> <div class="inner">Footer</div> </div> </div>

方法 3 - calc()

如果页眉和页脚是固定高度，则可以使用 CSS calc() 。

js小提琴

 html, body { height: 100%; margin: 0; } .wrapper { height: 100%; } .header, .footer { height: 50px; background: silver; } .content { height: calc(100% - 100px); overflow: auto; background: pink; }
 <div class="wrapper"> <div class="header">Header</div> <div class="content"> <div style="height:1000px;">Content</div> </div> <div class="footer">Footer</div> </div>

方法 4 - 所有人的 %

如果页眉和页脚是已知的高度，并且它们也是百分比，你可以做简单的数学运算，使它们的高度为 100%。 

 html, body { height: 100%; margin: 0; } .wrapper { height: 100%; } .header, .footer { height: 10%; background: silver; } .content { height: 80%; overflow: auto; background: pink; }
 <div class="wrapper"> <div class="header">Header</div> <div class="content"> <div style="height:1000px;">Content</div> </div> <div class="footer">Footer</div> </div>

js小提琴

解决方案4
 8  2019-10-06 18:07:19

现在我们有了 CSS 网格。 欢迎来到 2019 年。 

 /* Required */ body { margin: 0; height: 100%; } #wrapper { height: 100vh; display: grid; grid-template-rows: 30px 1fr 30px; } #content { overflow-y: scroll; } /* Optional */ #wrapper > * { padding: 5px; } #header { background-color: #ff0000ff; } #content { background-color: #00ff00ff; } #footer { background-color: #0000ffff; }
 <body> <div id="wrapper"> <div id="header">Header Content</div> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="footer">Footer Content</div> </div> </body>

解决方案5
 6  2013-09-20 16:29:26

截至 2013 年：这将是我的方法。 js小提琴：


HTML

<header class="container global-header">
    <h1>Header (fixed)</h1>
</header>

<div class="container main-content">
    <div class="inner-w">
        <h1>Main Content</h1>
    </div><!-- .inner-w -->
</div> <!-- .main-content -->

<footer class="container global-footer">
    <h3>Footer (fixed)</h3>
</footer>


社会保障局

// User reset

* { // creates a natural box model layout
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} // asume normalize.css


// structure

.container {
    position: relative;
    width: 100%;
    float: left;
    padding: 1em;
}


// type

body {
    font-family: arial;   
}

.main-content {
    h1 {
        font-size: 2em;
        font-weight: bold;
        margin-bottom: .2em;
    }
} // .main-content


// style

    // variables
    $global-header-height: 8em;
    $global-footer-height: 6em;

.global-header {
    position: fixed;
    top: 0; left: 0;
    background-color: gray;
    height: $global-header-height;
}

.main-content {
    background-color: orange;
    margin-top: $global-header-height;
    margin-bottom: $global-footer-height;
    z-index: -1; // so header will be on top
    min-height: 50em; // to make it long so you can see the scrolling
}

.global-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: $global-footer-height;
    background-color: gray;
}

解决方案6
 5  2014-09-10 06:02:38

这对我有用。 我不得不添加一个 margin-bottom 以便页脚不会吃掉我的内容：

header {
  height: 20px;
  background-color: #1d0d0a;
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hide;
}

content {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
  margin-top: 20px;
  overflow: auto;
  width: 80%;
}

footer {
  position: fixed;
  bottom: 0px;
  overflow: hide;
  width: 100%;
}

解决方案7
 1  2020-12-04 10:48:09

使用 CSS 网格对我来说效果很好。 最初修复容器，然后给overflow-y: auto; 对于必须滚动的中心内容，即页眉和页脚除外。 

 .container{ height: 100%; left: 0; position: fixed; top: 0; width: 100%; display: grid; grid-template-rows: 5em auto 3em; } header{ grid-row: 1; background-color: rgb(148, 142, 142); justify-self: center; align-self: center; width: 100%; } .body{ grid-row: 2; overflow-y: auto; } footer{ grid-row: 3; background: rgb(110, 112, 112); }
 <div class="container"> <header><h1>Header</h1></header> <div class="body"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <footer><h3>Footer</h3></footer> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 固定页眉，可滚动内容，固定页脚布局 固定的页眉和页脚具有100％可滚动的内容 具有固定页眉和页脚以及可滚动内容的模态对话框 具有固定页眉和页脚以及可滚动内容的 Flexbox 两个带有固定 header 和页脚的可滚动内容栏 垂直固定的页眉和页脚，可滚动的内容，水平居中 具有固定页眉、页脚和可滚动内容的响应式网格布局 固定的页眉/页脚，可滚动的内容，上方/下方的空间 具有固定标题的可滚动内容 CSS 布局与 header（固定），正文拆分菜单（可滚动）和内容（可滚动），页脚（固定）
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM