css宽高自适应布局，实现Sticky Footer的三种布局方式

宽度自适应布局：

 

1、使用场景：

一侧（左侧或者右侧）为固定的导航或者菜单栏，另一侧将会随着浏览器的缩放而自适应改变其大小。这种布局结构可用于顶层布局结构亦可用于某个局部功能块，常见于各种web系统（OA系统，ERP系统）等。常见的有两列布局或者三列布局（甚至是多列布局）。

 

2、实现原理：

以两列布局为例，一侧固定宽float浮动，另一侧不浮动并使用margin属性 给浮动层留出浮动空间。

 

3、demo如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>宽度自适应</title><style>html,body,div {height:100%;padding:0;margin:0;border:0;text-align: center;}.left {width:200px;float: left;background-color: lightskyblue;}.center {width:auto;margin-left:200px;_margin-left:197px;  //IE6的兼容写法，margin减少3pxbackground-color: lightcyan;}</style>
</head>
<body><div class="left">left</div><div class="center">center</div></body>
</html>

效果如下：

 

注意：

1、上述代码右侧 div.center 元素不设置样式 width:auto; margin-left:200px; 也可以实现右侧自适应宽度。但是，不设置的话会导致div.center 的子元素使用margin属性不是基于.center 父元素位置的，如下代码对应的效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>宽度自适应</title><style>html,body,div {height:100%;padding:0;margin:0;border:0;}.left {width:200px;float: left;background-color: lightskyblue;}.center {background-color: lightcyan;}.center div {height:100px;background-color: #fff;margin-left:250px;}</style>
</head>
<body><div class="left">left</div><div class="center">center<div>这是中心区域的子元素</div></div></body>
</html>

 

2、在IE6浏览器下两列之间会存在3px的间隙bug：IE6浏览器会在浮动列和非浮动列之间插入3px的空间。IE6的3px bug问题的解决方式是两列都设置为float或者非浮动层一侧margin值减少3px。而这里要实现宽度自适应，最好的解决方式是右侧.center层margin-left：197px;

所以修改右侧div.center层的样式代码，兼容性的写法如下：

  .center {width:auto;margin-left:200px;_margin-left:197px;  //margin减少3pxbackground-color: lightcyan;}

 

 

高度自适应布局：

1、使用场景：

通常适用于顶栏（或者底栏）需要固定，剩余的部分能够根据浏览器的大小自适应其高度。

 

2、实现原理：

在现在浏览器中（包括IE7+，Chrome，Firefox等等），高度自适应可以利用绝对定位来解决。当一个元素的定位属性是absolute时，它将摆脱默认的文档流，其大小默认是元素内容的大小，除非手动给其设置宽高。

当一个元素是绝对定位时，如果没有给它设定高度或宽度，则它的的高度和宽度是由它的 top、right、bottom、left 属性决定的，换言之，自身的属性是由自身周围的绝对布局元素决定的 。这样，就可以实现元素的高度自适应布局了。

 

3、demo如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>高度自适应</title><style>html,body {height:100%;}body,div {margin: 0;padding: 0;}html {_padding-top:100px;  //IE6盒子改变padding不会形象content高}.top {background-color: lightskyblue;height: 100px;_position:absolute;_top:0px;_width:100%;}.main {background-color: lightcyan;position: absolute;top: 100px;bottom: 0;left: 0;right: 0;_height:100%;_width:100%;}</style></head><body><div class="top">我是top</div><div class="main">main元素，使用absolute绝对定位，使用top属性实现高度自适应</div></body>
</html>

效果：

 

注意：

在IE6中，即使你将一个元素的定位属性设置成absolute了，此时改变其位置属性并不能改变元素的大小。解决方式是利用IE盒子特性的content包含padding的原理，如IE6中给html设定padding,并不会撑大html元素的尺寸来实现

 

 

 

Sticky Footer 布局的多种方式：

 

1、使用负margin原理实现：

 

给html，body，container容器的高度都设为100%，即container已经占据满了整个页面了，此时再添加footer容器，则footer必定会超出页面底部，而且会让页面出现滚动条。所以，我们给footer添加一个负值的margin-top，将footer容器从屏幕外拉上来，同时cotent内容使用padding-bottom给footer留空位。这个负值的margin-top与footer的高度相同。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Sticky Footer 布局测试</title><style>
html,body {height:100%;margin: 0;padding: 0;
}.container {min-height: 100%;background-color: lightcyan;height: auto !important;height: 100%; /*IE6不识别min-height*/
}.container .content{padding-bottom: 50px; /* footer区块的高度 */background-color: lightskyblue;/* height:800px;  当文本内容高度超出显示器高度范围时，页脚粘在就内容脚部*/
}.footer {position: relative;margin-top: -50px;  /* 使footer区块正好处于content的padding-bottom位置 */height: 50px;clear: both;background-color: gray;
}.clearfix::after {display: block;content: ".";height: 0;clear: both;visibility: hidden;
}</style></head><body><div class="container clearfix"><div class="content">// 这里是页面内容</div></div><div class="footer">// 这里是footer的内容</div></body>
</html>

 

这种负margin的布局方式，是兼容性最佳的布局方案，各大浏览器均可完美兼容，适合各种场景，但IE6不支持min-height样式，且使用这种方式的前提是必须要知道footer元素的高度，且结构相对较复杂。

注意:content元素的padding-bottom、footer元素的高度以及footer元素的margin-top值必须要保持一致。

 

附：min-height的css表达式代码如下，但不建议采用，与性能优化相悖。

.content{min-height:calc(100vh-footer的高度);box-sizing:border-box;
}

 

 

2、footer绝对定位结合主体的padding-bottom实现：

 

是footer因为绝对定位脱离文档流后，使用bottom:0; 会使之一直在父元素contaner容器底部位置，再利用contaner容器的min-height就实现了footer元素在内容页面少于一屏时候显示在显示器页脚位置，当显示内容页面大于等于一屏时紧跟在内容脚部。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Sticky Footer 布局测试</title><style>
html,body {height:100%;margin: 0;padding: 0;
}.container {min-height: 100%;background-color: lightcyan;height: auto !important;height: 100%; /*IE6不识别min-height*/position: relative;
}.container .content{padding-bottom: 50px; /* footer区块的高度 */background-color: lightskyblue;/*height:800px; *//*  当文本内容高度超出显示器高度范围时，页脚粘在就内容脚部*/
}.footer {position: absolute;width:100%;height: 50px;bottom: 0;clear: both;background-color: gray;
}.clearfix::after {display: block;content: ".";height: 0;clear: both;visibility: hidden;
}</style></head><body><div class="container clearfix"><div class="content">// 这里是页面内容</div><div class="footer">// 这里是footer的内容</div></div></body>
</html>

 

 

 

 

3、使用flex原理实现：

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

flex 是 flex-grow、flex-shrink、flex-basis的缩写。flex 的默认值是以上三个属性值的组合。

假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。当 flex 取值为 none，则计算值为 0 0 auto ；当 flex 取值为 auto，则计算值为 1 1 auto；当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%；当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Sticky Footer 布局测试</title><style>
html,body {height:100%;margin: 0;padding: 0;
}.container {min-height: 100%;background-color: lightcyan;display: flex;flex-direction: column;
}.content{flex:1;background-color:lightskyblue;
}
.footer {height:100px;flex:0;background-color: grey;
}</style></head><body><div class="container"><div class="content">content,这是主要内容区域</div><div class="footer">footer,这是脚部内容区域</div></div></body>
</html>

 

这种布局方式结构简单，代码量少，也是较为推荐的布局方式。

注意：flex属性存在浏览器兼容性为问题，flex样式前需要添加-webkit-, -ms- 或 -moz- 等前缀兼容个各个浏览器，同时对浏览器版本有要求，必须是不低于以下各个浏览器版本

 

当然也可以使用表达式

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/554009.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

360安全浏览器打印设置在哪里

360安全浏览器打印设置在哪里

360安全浏览器打印设置在哪里 360安全浏览器打印设置在哪里?360安全浏览器是很适合大众使用的一款新一代浏览器&#xff0c;拥有全国最大的恶意网址库&#xff0c;采用恶意网址拦截技术&#xff0c;用户们还可以使用360安全浏览器进行打印&#xff0c;但好用朋友不知道360安全…
阅读更多...
谷歌浏览器怎么设置点击书签 谷歌浏览器如何设置点击书签

谷歌浏览器怎么设置点击书签 谷歌浏览器如何设置点击书签

谷歌浏览器怎么设置点击书签 谷歌浏览器如何设置点击书签 在常用的浏览器中设置标签&#xff0c;可以迅速进入自己所需的页面&#xff0c;非常节省时间&#xff0c;你还可以对设置的书签进行删减等操作&#xff0c;十分方便。 打开应用&#xff0c;在界面的右上角找到竖向三点…
阅读更多...
nodejs 安装后 npm-v 无效，node全局环境配置

nodejs 安装后 npm-v 无效，node全局环境配置

Nodejs安装后使用 npm -v 命令无效果&#xff0c; 解决办法是需要删除C:\Users\{账户}\下的.npmrc文件.... &#xff0c;注意不是删除安装文件下的.npmrc文件. 安装nodejs后的环境配置&#xff1a; 说明&#xff1a;这里的环境配置主要配置的是npm安装的全局模块所在的路径&a…
阅读更多...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符

vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符

事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流&#xff0c;这两种事件流分别是捕获和冒泡。 和许多Web技 术一样&#xff0c;在它们成为标准之前&#xff0c;Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流&#xff0c;微软则实现了冒泡事件流。…
阅读更多...
vue中路径的配置使用

vue中路径的配置使用

绝对路径使用&#xff1a; 在项目中build文件夹下的webpack.base.conf.js的 使用如下&#xff1a; import mock from /mock/mock.js; html 相对路径使用 1. 当需要引用 同一目录下的文件&#xff0c;直接输入文档, 如下 <img src”bg.jpg” /> 2、当需要引用下一级目录…
阅读更多...
腾讯视频如何设置缓存画质和个数

腾讯视频如何设置缓存画质和个数

腾讯视频如何设置缓存画质和个数 我们在使用腾讯视频缓存的时候可以更改缓存的画质和缓存个数&#xff0c;下面几步教你操作! 1、在手机上直接打开腾讯视频APP 2、进入个人中心&#xff0c;点击设置 3、在设置中&#xff0c;点击缓存清晰度 4、有四个清晰度可以进行更改&a…
阅读更多...
怎么关闭默认使用腾讯视频播放视频文件

怎么关闭默认使用腾讯视频播放视频文件

我们在使用qq的时候会收到一些视频文件&#xff0c;当我们打开视频文件的时候会发现默认使用腾讯视频播放&#xff0c;那么本文播放器家园网小编要给大家分享的是怎么取消或者是关闭掉默认使用腾讯视频播放视频。 1 　　找到QQ&#xff0c;点击打开。 2 　　找到主菜单图标&am…
阅读更多...
vue2开发中$emit 、$on 、$once 、$off 的使用, vue中$root、$refs、$parent 的使用

vue2开发中$emit 、$on 、$once 、$off 的使用, vue中$root、$refs、$parent 的使用

一、vue2开发中$emit 、$on 、$once 、$off 的使用 简单概述&#xff1a; 1、vm.$emit(eventName,callback) 和 $on(eventName,callback) 一般结合使用。使用$emit触发当前实例上的自定义事件&#xff08;并将附加参数都传给监听器回调&#xff09;&#xff0c;使用 $on 监听…
阅读更多...
淘宝账号如何登陆优酷视频

淘宝账号如何登陆优酷视频

本文播放器家园网小编给大家分享淘宝账号如何登陆优酷视频?如今的淘宝网还可以登陆许多网址了&#xff0c;想要知道怎样用淘宝帐号登陆优酷视频吗?小编今日教大伙儿如何做。 01、 最先开启搜狗浏览器&#xff0c;随后键入“优酷视频”&#xff0c;在下面的选择项中挑选含有官…
阅读更多...
常用MIME类型，解决IIS布署后字体文件、mp4视频文件等not found 的错误

常用MIME类型，解决IIS布署后字体文件、mp4视频文件等not found 的错误

前言&#xff1a;项目在本地运行正常&#xff0c;但部署在IIS服务器后使用浏览器访问项目会报&#xff1a;404 not found 错误&#xff0c;包括mp4视频文件和woff文件找不到。。如下 原因&#xff1a;在IIS中没有将 .mp4和 .woff 后缀的相应的MIME类型&#xff0c;使得 .mp4等格…
阅读更多...
win7电脑屏幕亮度怎么调节

win7电脑屏幕亮度怎么调节

win7电脑屏幕亮度怎么调节?有用户想要调节电脑屏幕亮度&#xff0c;操作方法有很多。下面小编就和大家分享win7电脑屏幕亮度的几个调节方法。大家可以通过快捷键组合、显示器调节按钮、系统设置、第三方软件等方式实现。 1、笔记本一般可以通过笔记本键盘组合键实现调节&…
阅读更多...
让IE6\7\8支持Html5和CSS3的各类JS和Htc归纳（html5shiv.js、respond.js、background-size.htc、ie-css3.htc、pie.htc等）

让IE6\7\8支持Html5和CSS3的各类JS和Htc归纳（html5shiv.js、respond.js、background-size.htc、ie-css3.htc、pie.htc等）

前言&#xff1a; 由于IE6/IE7/IE8还有很大一部分用户&#xff0c;为了让网站浏览者都能正常的访问HTML5网站&#xff0c;解决方案就有下面两个&#xff1a; 1. 为网站创建多套模板&#xff0c;通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面&#xff0c;这样的…
阅读更多...
win7电脑连不上网怎么办

win7电脑连不上网怎么办

win7电脑连不上网怎么办?如今的电脑如果没有网络&#xff0c;那基本等于全废了&#xff0c;毕竟大家的电脑总不能一直用于单机办公和娱乐吧。因此&#xff0c;遇到电脑连不上网络的情形是相当令用户感到头疼的。下面小编就和大家分享几个常见的引起win7电脑连不上网的解决方法…
阅读更多...
浏览器兼容video视频播放的多种方法

浏览器兼容video视频播放的多种方法

前言&#xff1a; 在 HTML 中播放视频并不容易&#xff01;因为直到现在&#xff0c;仍然不存在一项旨在网页上显示视频的标准。今天&#xff0c;大多数视频是通过插件&#xff08;比如 Flash&#xff09;来显示的。然而&#xff0c;并非所有浏览器都拥有同样的插件。 比如win…
阅读更多...
win7系统如何取消自动开机

win7系统如何取消自动开机

最近有位win7系统用户在使用电脑的过程中&#xff0c;发现电脑总是半夜自动开机&#xff0c;用户不知道怎么解决这个问题&#xff0c;为此非常苦恼&#xff0c;那么win7系统如何取消自动开机呢?今天小编为大家介绍win7系统取消自动开的操作教程。 win7系统如何取消自动开机 …
阅读更多...
px、em、rem区别介绍

px、em、rem区别介绍

PX px像素&#xff08;Pixel&#xff09;。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 1. IE无法调整那些使用px作为单位的字体大小&#xff1b;2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位&#xff1b;3. Firefox能够调整px和em…
阅读更多...
win7系统如何清理系统日志

win7系统如何清理系统日志

相信很多电脑用户都知道&#xff0c;电脑系统在运行的时候会产生系统日志&#xff0c;它可以记录系统中的硬件、软件和系统的各种问题信息&#xff0c;可以通过它检索错误发生的原因&#xff0c;不过时间长了&#xff0c;这类日志文件就会积压&#xff0c;导致系统存储变小&…
阅读更多...
pdf文件加密解密，pdf忘记密码解密的办法

pdf文件加密解密，pdf忘记密码解密的办法

1、pdf文件加密 步骤&#xff1a;wps》菜单“保护”》文档加密&#xff0c;设置编辑及页面密码&#xff0c;如下 2、pdf解密 在解密窗口取消选择“设置编辑及页面密码”&#xff0c;如下 注意&#xff1a;当忘记pdf密码时&#xff0c;可以使用pdf解密软件解密&#xff0c;如下…
阅读更多...
2021-06-07

2021-06-07

如何解决360浏览器卡死的问题 我们在上网的时候&#xff0c;不可缺少的就是浏览器了&#xff0c;有一大部分人还是喜欢用360浏览器的。刚开始用360浏览器的时候感觉很不错&#xff0c;都都不知什么情况&#xff0c;老是无故崩溃&#xff0c;或者时常卡死&#xff0c;上网慢&am…
阅读更多...
伪类::selection自定义文本选中时的样式（CSS3样式），CSS3的word-break单次换行

伪类::selection自定义文本选中时的样式（CSS3样式），CSS3的word-break单次换行

1、::selection CSS3伪类自定义文本选中时的样式 有的人在浏览网页时&#xff0c;喜欢一边选中文本一边阅读。在windows环境下&#xff0c;正常的文本选中应该是深蓝色背景白色文本的样式。那么想要修改文本选中样式&#xff0c;可以通过css中有这样的一个伪类::selection用于自…
阅读更多...
最新文章

Copyright @ 2022~2023