移动端如何实现上下固定，中间滚动自适应布局。
希望要一个这个效果。但是我调了半天就是不行。
有没有什么好得解决办法，我需要上下固定，不会滚动，中间滚动自适应高度。
我vue写得。我发现网上说的给html和body高度百分百，但是我给了都不生效。然后我用过上下固定定位，但是这样他们就脱离文档流了，中间确实可以通过margin来把他位置保持在中间，但是滚动条就会超出中间的内容区域，滚动到上下固定的模块内。有没有办法可以解决这种问题。
网上看了很多解决办法，甚至把别人代码直接复制下来就是不生效。
你中间部分 肯定要 减去 头和 底部 的高度才行 。calc 可以 计算高度 calc(100vh - 100px)也行 。100就是 首和底部的距离 根据你的需求改变 。
calc 符号 之间要有空格 要不然不生效 比如 ：calc(100%-100px)
html,body设置宽高100%也要有
这个效果吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.box {
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 50px;
background: red;
}
.content {
width: 100%;
height: calc(100% - 100px);
overflow: auto;
}
.content p{
height: 300px;
}
.footer {
width: 100%;
height: 50px;
background: red;
}
</style>
</head>
<body>
<div class="box">
<div class="header"></div>
<div class="content">
<p>5555555555555555555555</p>
<p>5555555555555555555555</p>
<p>5555555555555555555555</p>
<p>5555555555555555555555</p>
<p>5555555555555555555555</p>
</div>
<div class="footer"></div>
</div>
</body>
</html>
hedder和footer固定好在上面和下面，中间滚动区域高度使用动态高度，也就是滚动区域高度=屏幕高度 - hedder高度 - footer高度
header 和 footer 用fixed 固定住，content 块高度固定，加个overflow-y:scroll
查看父级以及html，body高度是否是100%，否则子级无法继承