Đã sửa lỗi đầu trang, chân trang với nội dung có thể cuộn

Question 1

Làm cách nào để có được đầu trang cố định, chân trang có nội dung cuộn được? Một cái gì đó giống như trang này . Tôi có thể xem nguồn để lấy CSS, nhưng tôi chỉ muốn biết CSS và HTML tối thiểu mà tôi cần để làm việc này.

Question 2

Một cái gì đó như thế này

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

Question 3

Nếu bạn đang nhắm mục tiêu các trình duyệt hỗ trợ hộp linh hoạt, bạn có thể làm như sau .. 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;
}

Cập nhật:
Xem "Tôi có thể sử dụng" để biết trình duyệt hỗ trợ các hộp linh hoạt .

Question 4

Phương pháp 1 - flexbox

Nó hoạt động tốt cho cả yếu tố chiều cao đã biết và chưa biết. Đảm bảo đặt div bên ngoài thành height: 100%;và đặt lại mặc định margintrên body. Xem các bảng hỗ trợ trình duyệt .

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>

Mở rộng đoạn mã

Phương pháp tiếp cận 2 - Bảng CSS

Đối với cả phần tử chiều cao đã biết và chưa biết. Nó cũng hoạt động trong các trình duyệt kế thừa bao gồm IE8.

jsFiddle

Hiển thị đoạn mã

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>

Mở rộng đoạn mã

Cách tiếp cận 3 - `calc()`

Nếu đầu trang và chân trang có chiều cao cố định, bạn có thể sử dụng CSS calc().

jsFiddle

Hiển thị đoạn mã

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>

Mở rộng đoạn mã

Tiếp cận 4 -% cho tất cả

Nếu đầu trang và chân trang đã biết chiều cao, và chúng cũng là tỷ lệ phần trăm, bạn có thể thực hiện phép toán đơn giản ghép chúng với chiều cao 100%.

Hiển thị đoạn mã

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>

Mở rộng đoạn mã

jsFiddle

Question 5

Bây giờ chúng ta đã có lưới CSS. Chào mừng đến với năm 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>

Mở rộng đoạn mã

Question 6

Tính đến năm 2013: Đây sẽ là cách tiếp cận của tôi. 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;
}

Question 7

Đây là những gì đã làm việc cho tôi. Tôi đã phải thêm một lề cuối để chân trang không ăn hết nội dung của tôi:

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

Đã sửa lỗi đầu trang, chân trang với nội dung có thể cuộn

Phương pháp 1 - flexbox

Phương pháp tiếp cận 2 - Bảng CSS

Cách tiếp cận 3 - calc()

Tiếp cận 4 -% cho tất cả

Cách tiếp cận 3 - `calc()`