1.页面宽度:如下设置可以让屏幕居中显示,并且随浏览器横向缩放宽度会自适应处于最小宽度和最大宽度之间
.container {
position: relative;
min-width: 1130px;
max-width: 1296px;
margin: 0 auto;
}
2.高度:footer不是固定定位的,但是需要距离底边100px,此时需要设置内容区高度与设备窗口可视高度相同,偶尔还需要减掉固定header的高度。
在vue中,通过计算属性获取内容区高度,64是header高度
contentHeight(){
return document.documentElement.clientHeight - 64
}
<div class="container" :style="{height:contentHeight+'px'}">
可以尝试在css里 height:calc(100vh - 64px); //注意减号两边必须有空格
3.水平居中显示时尽量用margin: 0 auto; 而不是position,因为position脱离文档流,回去其他内容造成影响,特别是父级元素的布局,父如果有兄弟元素影响会很大。建议只在对最小级别的元素用position居中。