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

时间：2010-11-01 14:26:17

标签： html css css3

如何获得具有可滚动内容的固定页眉，页脚？这样的事情page。我可以查看获取CSS的源代码，但我只想知道我需要的最小CSS和HTML才能实现这一点。

enter image description here

7 个答案:

答案 0 :(得分：110)

像这样的东西

<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>

答案 1 :(得分：43)

如果您的目标是支持灵活方框的浏览器，您可以执行以下操作： 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;
}

<强>更新
请参阅browser support of flexible boxes的“我可以使用”。

答案 2 :(得分：36)

方法1 - flexbox

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

<强> jsFiddle 

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在内的传统浏览器。

<强> jsFiddle 

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()。

<强> jsFiddle 

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>

<强> jsFiddle

答案 3 :(得分：4)

这对我有用。我不得不添加一个边距底部，以便页脚不会吃掉我的内容：

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%;
}

答案 4 :(得分：3)

截至2013年：这将是我的方法。 jsFiddle:


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>


SCSS 

// 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;
}

答案 5 :(得分：1)

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

StackOverflow的代码段需要固定的高度，在这种情况下，它被设置为180px。此值不是必需的，在一般实践中不建议使用。 

/* Required Stuff */
body {
   margin: 0;
   height: 100%;
}

#wrapper {
   display: grid;
   grid-template-rows: 30px 1fr 30px;
}

#content {
   overflow-y: scroll;
}

/* Optional Stuff */
#wrapper {
   gap: 1px;
   height: 100%;
   border: 1px solid black;
   background-color: black;
}

#wrapper > * {
   padding: 5px;
   background-color: white;
}

/* do not copy this into your own projects */
/* stack overflow needs fixed height */
/* just pretend "180px" is just the full page size */
body {
   height: 180px;
}
<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>

答案 6 :(得分：0)

使用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>

相关问题
最新问题