image.png
1. position: fixed实现
①顶栏和③底栏都设置position:fixed,分别置于页面的顶部和底部，然后②内容的部分设置marin-top和margin-bottom为①顶栏和③底栏的高度，这样②内容部分就可以滚动页面来浏览
<body>
<header id="header" class="header">
</header><!-- /header -->
<main class="content">
</main>
<footer class="fotter">
</footer>
</body>
body{
margin: 0;
padding: 0;
}
.header{
background-color: gray;
height: 20px;
position: fixed;
width: 100%;
top: 0;
}
.content{
background-color: blue;
min-height: 100vh;
margin: 20 0 20px 0;
}
.fotter{
background-color: red;
height: 20px;
position: fixed;
bottom: 0;
width: 100%;
}
注意要给定位后的footer和header一个宽度，此时header和footer都是固定宽度。
定位对元素宽度的影响
包含块
首先我们先回顾一下包含块（定位上下文）的基本概念：
1.初始包含块（根元素的包含块）由用户代理确定。
2.浮动元素包含块定义为最近的块级祖先元素。
3.相对定位或静态定位元素包含块由最近的块级框、表单元格、或行内块框祖先元素（任何类型）内容边界构成。
4.绝对定位元素包含块设置为最近的定位不是static的祖先元素（任何类型）的边框界定（对块级父元素）或内容边界界定（对行内父元素）。
宽度与偏移
一般的，元素的大小和位置取决于其包含块。定位就是元素各外边距边界相对于其包含块相应边（内边界与边框相邻边）进行偏移，影响的是元素的所有一切（外边距、边框、内边距、内容）都会移动。故对于一个定位元素有如下等式（后边的计算均基于该式）：
left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right=包含块的width
据此，在未定义元素的宽度width和高度height时，其值大小都会受到定位影响。对于定位元素来说，是否需要设置其宽度高度应根据情况确定。考虑以下几种情况其宽度高度各是多少的确定规则：
1.如果将偏移属性top，left，bottom，right都进行了确定，而未设置外边距，内边距和边框的时候，是否显式设置宽度高度，其值都是由偏移属性确定的；反之若设置了外边距或内边距（auto也算），边框时，高度宽度就是其显式设置值，未显式设宽高的仍由偏移属性确定。
2.对于非替换元素水平轴行为：
1）如果left，width，right都为auto，且没有设置内外边距，边框，则经过计算元素左边位于其静态位置（从左往右读），width“恰当收放”，根据上述等式right为余下的水平距离；
2）当等式中所有值为固定值时，若元素“过度受限”则right会根据上式重置；
3）当上述等式中只有一个属性值为auto时，元素“过度受限”时就会重置这一属性值以满足等式；
4）垂直轴规则类似，但要注意只有top可以取静态位置，bottom做不到。
3.对于替换元素（注意这里没有“恰当收放”的概念，因为替换元素有固有宽高）：
1）先看其width（height）是否显式声明，显式声明则为该值，否则由元素内容实际大小（宽高）决定；
2）再看left，top若为auto则替换为静态位置；
3）再看如果left和bottom值如果还为auto，则令margin的auto都置0，若未被置0就设置为左右相等，上下相等；
4）在此之后如果只剩下一个auto值，则同非替换元素类似，根据等式重置该auto值。
5）当元素“过度受限”时，与非替换元素处理一样，用户代理会忽略right（从左向右读）和bottom。
以上就是对一个绝对定位元素实际显示的宽度高度的影响因素情况分析，当你发现界面显示的效果与你预想的不一致时，可以考虑从上述角度分析一下看是否需要重新确定元素的宽度高度值，或以上其它属性的值。
2. flex布局
①顶栏和③底栏都设置position:fixed,分别置于页面的顶部和底部，然后②内容的部分设置marin-top和margin-bottom为①顶栏和③底栏的高度，这样②内容部分就可以滚动页面来浏览
<body>
<div class="bigDiv">
<div class="header">
header
</div>
<div class="content">
<div class="main_content">
</div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
body{
margin: 0;
padding: 0;
}
.bigDiv{
height:100vh;
display:flex;
flex-direction: column;
justify-content:center;
text-align: center;
}
.header,.content,.footer{
text-align: center;
font-size: 30px;
font-family: arial;
}
.header{
flex: 0 0 auto;
background-color: gray;
}
.content{
flex: 1 1 auto;
background-color: red;
display:flex;
min-height: inherit;
overflow-y: scroll;
}
.footer{
flex: 0 0 auto;
background-color: gray;
}
footer高度任意+js
<body>
<header>header</header>
<main>main content</main>
<footer>footer</footer>
</body>
html,body{margin:0;padding: 0;}
header{background-color: #ffe4c4;}
main{background-color: #bdb76b;}
footer{background-color: #ffc0cb;}
/* 动态为footer添加类fixed-bottom */
.fixed-bottom {position: fixed;bottom: 0;width:100%;}
$(function(){
function footerPosition(){
$("footer").removeClass("fixed-bottom");
var contentHeight = document.body.scrollHeight,//网页正文全文高度
winHeight = window.innerHeight;//可视窗口高度，不包括浏览器顶部工具栏
if(!(contentHeight > winHeight)){
//当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom
$("footer").addClass("fixed-bottom");
} else {
$("footer").removeClass("fixed-bottom");
}
}
footerPosition();
$(window).resize(footerPosition);
});
网友评论