flex 布局实现固定头部和底部，中间滚动布局

Pines_Cheng 发布于2019-04-22 19:50 / 2368人阅读

摘要：关键词，实现和固定，中间多了滚动，少了撑满和宽度根据内容撑起，当然你可以自己设置小二，上代码来喽布局关键的来啦关键，布局关键，三块主题摆放。

关键词：display: flex，flex: 1, overflow-y: scroll;

实现：head 和footer 固定，中间body多了滚动，少了撑满； head和footer宽度根据内容撑起，当然你可以自己设置........

小二，上代码！

来喽~~

// html布局
<html>
<body>
<div class="container">
    <div class="head">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPagediv>
    <div class="body">
      <div>orry, but the page you were trying to view does not exist.div>
       <div>shhhhsssdiv>
      <div>shhhhsssdiv>
      <div>shhhhsssdiv>
      <div>shhhhsssdiv>
      <div>shhhhsssdiv>
    div>
 <div class="footer">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Founddiv>
div>
body>
html>

关键的css来啦！

 2 * {
 3             line-height: 1.2;
 4             margin: 0;
 5 }
 6  html, body {
 7             font-family: sans-serif;
 8             height: 100%;
 9             width: 100%;
10 }
11 .container{
12      display: flex; // 关键， flex布局
13      flex-direction: column; // 关键，三块主题column摆放。
14      height: 100vh; // 关键，设置高度为可见高度的100%；        
15 }
16 .head{ 
17     width: 100%;
18     background: springgreen;
19 }
20 .body{
21      flex: 1; // 关键， 填充剩余空间
22      width: 100%;
23      background: lightyellow;
24      overflow-y: scroll;   // 关键， 超出部分滚动
25 }
26 .footer{
27     width: 100%;
28     background: goldenrod;
29 }

附上全部代码，可以自己复制到浏览器中打开，看效果~

doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Page Not Foundtitle>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

        * {
            line-height: 1.2;
            margin: 0;
        }

        html, body {
            color: #888;
            font-family: sans-serif;
            height: 100%;
            width: 100%;
        }
        .container{
          display: flex;
          height: 100vh;
          flex-direction: column;
        }
        .head{
          width: 100%;
          background: springgreen;
        }
        .body {
          background: lightyellow;
          width: 100%;
          flex:1;
          color: black;
          overflow-y: scroll;
        }
        .footer {
          background: goldenrod;
          width: 100%;
        }
        .body div {
          height: 200px;
          width: 300px;
          background: greenyellow;
          margin: 20px;
        }
    style>
head>
<body>
<div class="container">

    <div class="head">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Founddiv>
    <div class="body">
      <div>orry, but the page you were trying to view does not exist.div>
       <div>shhhhsssdiv>
      <div>shhhhsssdiv>
      <div>shhhhsssdiv>
      <div>shhhhsssdiv>
      <div>shhhhsssdiv>
    div>
 <div class="footer">Page Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not FoundPage Not Founddiv>
div>
body>
html>

GPU云服务器云服务器 flex布局固定布局 java固定对象布局自定义布局怎么实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/970.html

flex 布局实现固定头部和底部，中间滚动布局

摘要：关键词，实现和固定，中间多了滚动，少了撑满和宽度根据内容撑起，当然你可以自己设置小二，上代码来喽布局关键的来啦关键，布局关键，三块主题摆放。关键词：display: flex，flex: 1, overflow-y: scroll; 实现：head 和footer 固定，中间body多了滚动，少了撑满； head和footer宽度根据内容撑起，当然你可以自己设置........ 小二，...

cfanr 2019-04-22 17:02 评论0 收藏0
flex 布局实现固定头部和底部，中间滚动布局

摘要：关键词，实现和固定，中间多了滚动，少了撑满和宽度根据内容撑起，当然你可以自己设置小二，上代码来喽布局关键的来啦关键，布局关键，三块主题摆放。关键词：display: flex，flex: 1, overflow-y: scroll; 实现：head 和footer 固定，中间body多了滚动，少了撑满； head和footer宽度根据内容撑起，当然你可以自己设置........ 小二，...

antyiwei 2019-04-22 16:34 评论0 收藏0
flex 布局实现固定头部和底部，中间滚动布局

摘要：关键词，实现和固定，中间多了滚动，少了撑满和宽度根据内容撑起，当然你可以自己设置小二，上代码来喽布局关键的来啦关键，布局关键，三块主题摆放。关键词：display: flex，flex: 1, overflow-y: scroll; 实现：head 和footer 固定，中间body多了滚动，少了撑满； head和footer宽度根据内容撑起，当然你可以自己设置........ 小二，...

Shimmer 2019-04-22 16:12 评论0 收藏0
移动开发中固定布局

摘要：记录一下移动开发过程中出现的问题。若是涉及到移动开发布局中碰到固定某一部分，其余部分可滚动，尽量不要使用可用替代，若是不需要考虑兼容性，用更佳。记录一下移动开发过程中出现的问题。从最常见的布局说起，固定头部或底部算是最常见的需求了假定页面布局如下：实现头部、底部固定，中间滚动，有三种简单实现方式： fix...

XFLY 2019-08-23 14:03 评论0 收藏0
移动开发中固定布局

摘要：记录一下移动开发过程中出现的问题。若是涉及到移动开发布局中碰到固定某一部分，其余部分可滚动，尽量不要使用可用替代，若是不需要考虑兼容性，用更佳。记录一下移动开发过程中出现的问题。从最常见的布局说起，固定头部或底部算是最常见的需求了假定页面布局如下：实现头部、底部固定，中间滚动，有三种简单实现方式： fix...

Travis 2019-08-30 15:54 评论0 收藏0