先看html和效果图
body,p{ margin:0; } .header,.footer{ background:#000; height:60px; } /*兼容ie8 html,body{ height:100%; } */ .auto-height{ /*兼容ie8 min-height:100%; */ min-height:100vh; margin-top:-60px; margin-bottom:-60px; /*设置内边距方式一*/ box-sizing:border-box; padding-top:60px; padding-bottom:60px; } /*设置内边距方式二 .auto-height>div{ padding-top:60px; padding-botom:60px; } */渲染:
有两种方法:
第一个是由css实现的:
1.向主元素添加样式:
min-height:100vh; margin-top:-60px;//数值等于页面头部高度 margin-bottom:-60px;//数值等于页面尾部高度页边距的高度是页面头部和尾部的高度。
2.为了显示主元素中的所有内容，有两种方法可以增加相应的内边距:
box-sizing:border-box;//将main元素的宽高计算方式更改为包含内边距和边框 padding-top:60px;//数值等于页面头部高度 padding-botom:60px;//数值等于页面尾部高度或者设置其子元素的内边距:
.auto-height>div{ padding-top:60px;//数值等于页面头部高度 padding-botom:60px;//数值等于页面尾部高度 }3.因为ie8不支持vh单位，如果需要兼容ie8，可以将html和body的高度设置为100%，然后将主元素的最小高度设置为100%(min-height:100%)，其他设置不变。
html,body{ height:100%; }第二种是使用JavaScript:
只需用JavaScript动态设置主元素的最小高度，这里有一种实现方式。
var mainElem=document.getElementById("main-con");//获得main元素 document.onreadystatechange=function(){ if(document.readyState=="complete"){//页面加载完成时执行 mainElem.style.minHeight=(document.documentElement.clientHeight-120)+"px";//初始化最小高度 window.onresize=function(){//窗口大小改变时改变main元素的最小高度 mainElem.style.minHeight=(document.documentElement.clientHeight-120)+"px"; }; } };最小高度值=窗口高度-页头高度-页尾高度。
出发地:/d/file/04/kglw1urzyvs17446
adminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 在Adminjs.cn中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能！