伸缩盒header固定content变更，footer固定

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>overflow:auto的用法</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /><style type="text/css">//还有就是一定要给html和body给宽度和高度100%；html,body{width: 100%;height: 100%;}//在样式中要在最外边的父盒子container，加入以下样式：.container{width: 100%;height: 100%;display: flex;//将对象作为弹性伸缩盒显示flex-direction: column;border: 1px solid #000;}//头部和底部都给固定的高度，一般的app的头部和底部都是固定的，像微信聊天记录。.header{width: 100%;height: 100px;background: #f99;}//中间的content给定flex：1，并且加上我们的主角overflow：auto；超出的内容自动裁剪。.content{width: 100%;height: 100%;overflow: auto;background: yellow;flex: 1;//将盒子分成一份}.footer{width: 100%;height: 100px;background: #99f;}</style>
</head>
<body><div class="container"><div class="header"></div><div class="content"><ul><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li><li>111111</li>这里的li要多写一些，这样才会显示效果，我这里为了省篇幅。</ul></div><div class="footer"></div></div>
</body>
</html>

overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。
flex中的属性
display: flex;
flex-direction: column; 主轴为垂直方向，起点在上沿。

overflow和flex布局搭配使用

CSS overflow 属性

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

参考：https://www.cnblogs.com/qingchunshiguang/p/8011103.html

参考：https://www.cnblogs.com/evaling/p/6905651.html

参考：菜鸟教程http://www.runoob.com/cssref/css3-pr-align-items.html

来自：http://blog.csdn.net/boysky0015/article/details/72824172

伸缩盒header固定content变更，footer固定相关推荐

android html footer 固定,HTML5+CSS把footer固定在底部
在刚开始给网页写footer的时候,我们会碰到一个让人烦躁的问题:当页面内容太少时,footer显示在了页面中间,这是我们不希望出现的,我们希望它能够永远呆在底部,不管网页的内容是多还是少.下面的代码 ...
前端：页面内容不够，始终把footer固定在底部
绝对定位 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
html中如何在页面底部增加,HTML中footer固定在页面底部的若干种方法
如果主体内容过短不足以支撑浏览器时,footer会上移,非常影响页面,算是一个大bug了,搜过很多种方法现整理一下footer固定在第的若干种方法,供以后参考.(欢迎大家积极补充.) 以上布局为给个人 ...
如何将footer标签固定在底部_让footer固定在页面底部
最近做了几个触屏版页面,页面比较简单,内容短,但是都有个底部,面对各种机型,底部不是一直处于底部位置,长屏.高分辨率的机子上的表现是悬在半空中,就像一根刺卡在喉咙啊.为此做了几种尝试. 其中有个活动的 ...
Webkit Flex伸缩盒模型属性备忘
一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器,其包含的子元素是伸缩项目. flex是一个复合属性.Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义. ...
转：Webkit Flex伸缩盒模型属性备忘
一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器,其包含的子元素是伸缩项目. flex是一个复合属性.Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义. ...
[css] 写出固定子容器在固定的父容器下水平垂直居中的布局
[css] 写出固定子容器在固定的父容器下水平垂直居中的布 1.父容器 position: relative,子元素 position: absolute;left: 50%;top: 50%;tra ...
网页滚动条上下滚动固定元素左右不固定之sticky
网页滚动条上下滚动固定元素左右不固定之sticky 有时候我们需要网页中某元素在上下滚动时可以固定在某一位置,但是左右不固定,也就是会随着左右滚动条滚动.那么我们可以通过 sticky 布局来解决. ...
CSS3-多列布局-伸缩盒布局-伸缩项目
多列布局-伸缩盒布局-伸缩项目 1 回顾 1.1 变换 transform ① 相关CSS属性 transform transform-origin transform-style perspecti ...
WEB字体,多列布局和伸缩盒
WEB字体语法 @font-face{font-family:"";src:url() format()... } 兼容性写法 @font-face {font-family: ...

伸缩盒header固定content变更，footer固定

伸缩盒header固定content变更，footer固定相关推荐

最新文章

热门文章