用微信小程序怎么做网站,重庆传媒公司,广州建筑装饰集团有限公司,合肥做app公司页脚始终保持在页面底部的网页布局方法导语#xff1a;用CSS创建一个高度自适应布局#xff0c;如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。下面就由百分网小编为大家介绍一下页脚始终保持在页面底部的网页布局方法#xff0c;希…页脚始终保持在页面底部的网页布局方法导语用CSS创建一个高度自适应布局如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。下面就由百分网小编为大家介绍一下页脚始终保持在页面底部的网页布局方法希望对大家能有所帮助。步骤1、为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值同时清除所有元素的 margin 和 padding。顺便提一下经过我的测试html 和 body 的 height: 100%; 等于整个浏览器窗口的总高度无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的.高度。如何是不是有点不好理解* {margin: 0;padding: 0;}html, body {height: 100%;}2、因为上面提到的问题所以为了让布局自适应高度我们要加上 min-height: 100%;虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用#wrapper {min-height: 100%;}* html #wrapper {height: 100%;}这样一个最简单的最小高度满一屏的自适应布局就做好了。为了便于查看我加了一些宽度和背景色修饰如下* {margin: 0;padding: 0;}html, body {height: 100%;text-align: center;font: 12px/1.4 Verdana, sans-serif;background: #f00;}#wrapper {width: 770px;min-height: 100%;background: #ccc;margin: auto;text-align: left;}* html #wrapper {height: 100%;}jzxue.com-建站学/** {margin: 0;padding: 0;}html, body {height: 100%;text-align: center;font: 12px/1.4 Verdana, sans-serif;background: #F00;}#wrapper {width: 770px;min-height: 100%;background: #ccc;margin: auto;text-align: left;}* html #wrapper {height: 100%;}#header {background: Green;height: 40px;}#sidebar {float: left;width: 200px;background: Gray;}#content-box {float: right;width: 570px;background: Olive;}#footer {height: 50px;background: Background;width:770px;margin: auto;}/*]]*/此处显示 id header 的内容此处显示 id content-box 的内容此处显示 id sidebar 的内容此处显示 id footer 的内容【页脚始终保持在页面底部的网页布局方法】相关文章
