<body>
<div class="container">
<header>2</header>
<footer>1</footer>
</div>
</body>
方法一
使用css 的计算属性 calc
.container{
width: 100%;
height: 100vh;
}
header{
width: 100%;
height: 50px;
background: red;
}
footer{
width: 100%;
height: calc(100vh - 50px);
background: blue;
}
方法二
利用 css 弹性盒子 display:flex
.container{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
header{
width: 100%;
height: 50px;
background: red;
flex-grow: 0;
}
footer{
width: 100%;
background: blue;
flex-grow: 1;
}
小程序的 scroll-view 也可以用这种方法动态的去设置高度。需要稍微改动一下。
把 scroll-view 的高度设置成100%；给外出 body 一个高度。这个高度在flex-grow 的作用下并不会起作用。
<view class="container">
<view class="header"></view>
<view class="body">
<scroll-view :scroll-y="true" class="scroll-view"></scroll-view>
</view>
</view>
.container{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
.header{
width: 100%;
height: 50px;
background: red;
flex-grow: 0;
}
.body{
width: 100%;
background: blue;
heigth:100px;
flex-grow: 1;
}
.scroll-view{
height:100%;
}
