页面吸底效果
vue中css实现body的高度等于屏幕窗口的高度
body{
height:100vh;
}
关于height:100%和height:100vh的区别
vh就是当前屏幕可见高度的1%,也就是说
height:100vh == height:100%;
但是当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,
但是设置height:100vh,该元素会被撑开屏幕高度一致。
结构
<template>
//给父盒子页面设置吸底效果 页面高度低于屏幕高度时 等于屏幕高度
<el-container class="home-container">
<!-- 导航栏 -->
<el-header>
<div class="middle" id="content">
<el-dropdown class="my-dropdown">
<span class="el-dropdown-link">
<!-- 头像 用户名称 -->
<!-- <img class="avatar" src="../../assets/images/avatar.jpg" alt /> -->
<span class="username">用户名字</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<!-- slot="dropdown" 插槽 -->
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="openAmc()">后台管理</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-menu>
</div>
</el-header>
<el-main>
<div class="stair-top">
<!-- 弹出框 -->
<el-popover placement="left" width="240" trigger="hover" :visible-arrow="false">
<div slot="reference">
<span class="sta-set" @click="gotosearch">
<!-- 图标 楼梯导航名称 -->
<img class="sta-img" src="../../assets/images/consult.png" alt />
<span class="sta-name">小智搜索</span>
</span>
</div>
<img
style="width: 100%; height: 100px"
@click="gotosearch"
src="../../assets/images/logo_demo.png"
alt
/>
</el-popover>
<el-popover
placement="left"
width="240"
trigger="hover"
:visible-arrow="false"
popper-class="pop"
>
<div slot="reference" @click="open">
<span class="sta-set">
<img class="sta-img" src="../../assets/images/consult.png" alt />
<span class="sta-name">法律咨询</span>
</span>
</div>
<!-- <el-image
style="width: 100%; height: 100px"
src="../../assets/images/logo_demo.png"
:fit="scale-down"
></el-image>-->
<img
style="width: 100%; height: 100px"
@click="open"
src="../../assets/images/logo_demo.png"
alt
/>
</el-popover>
<el-popover placement="left" width="240" trigger="hover" :visible-arrow="false">
<div slot="reference" @click="openDialog">
<!-- <feedback></feedback> -->
<span class="sta-set">
<img class="sta-img" src="../../assets/images/Opinion.png" alt />
<span class="sta-name">意见反馈</span>
</span>
</div>
<!-- <el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>-->
<img
style="width: 100%; height: 100px"
@click="openDialog"
src="../../assets/images/logo_demo.png"
alt
/>
</el-popover>
</div>
<div class="stair-bottom">
<div @click="returnTop">
<span class="stb-set">
<img class="stb-img" src="../../assets/images/top.png" alt />
<span class="stb-name">返回顶部</span>
</span>
</div>
</div>
<!-- 二级路由对应组件渲染位置 style="min-height:825px" -->
<div class="content">
<router-view></router-view>
</div>
</el-main>
<el-footer style="height:40px">
<div class="foot">
<div>泰康资产管理有限责任公司</div>
<div class="jing">
<img src="../../assets/images/a.png" alt />
<span>Copyright ©2019 合规法律部 All Rights Reserved</span>
</div>
<div>本平台提供的信息仅供初步参考,不代表合规法律部的最终法律意见</div>
</div>
</el-footer>
<feedback ref="dialog2" :title="title" />
<legal ref="dialog1" :title="title" />
</el-container>
</template>
样式-css代码
<style scoped lang="less">
.home-container {
background: #f7f8fa;
width: 100%; //百分比宽度进行铺满屏幕
//-------------------------------------------------------------------------------------
// 页面吸底 在父盒子里进行设置
min-height: 100vh;
//-----------------------------------------------------------------------------------
position: absolute;
// 字体
font-family: PingFangSC-Regular;
left: 0;
top: 0;
padding: 0;
.el-header {
// border-bottom: 1px solid #ddd;
padding-bottom: 2.22px;
// border-bottom: 1px solid #ddd;
line-height: 60px;
padding: 0px;
// margin-bottom: 20px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
// font-family: PingFang;
// 测试颜色
background: #ffffff;
.middle {
margin: 0 auto;
width: 1180px;
.logo {
float: left;
// display: inline-block;
width: 120px;
height: 60px;
// padding-bottom: 1.22px;
// border-bottom: 1px solid #ddd;
}
.logo-b {
float: left;
width: 1060px;
.my-dropdown {
// padding-right: 130px;
float: right;
.avatar {
width: 30px;
height: 30px;
vertical-align: middle;
}
.username {
margin-left: 10px;
font-weight: bold;
color: #333;
vertical-align: middle;
}
}
}
}
// padding-left: 130px;
}
.el-main {
padding: 0px;
margin: 0px;
// background: #f8f8f8;
.content {
width: 1180px;
height: 100%;
margin: 0 auto;
background: #f7f8fa;
// 测试颜色
// background: #c1ffc1;
}
.stair-top {
position: fixed;
// float: right;
top: 0px;
right: 0px;
width: 50px;
height: 100%;
background: #ffffff;
padding-top: 60px;
div {
height: 122px;
border-bottom: 1px solid #ddd;
// background: green;
display: flex;
flex-direction: row; /* 子元素横向排列 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
.sta-set {
.sta-img {
width: 30px;
height: 30px;
}
.sta-name {
display: block;
width: 28px;
height: 40px;
font-size: 14px;
color: #555555;
text-align: center;
}
}
}
}
.stair-bottom {
// 固定定位
position: fixed;
// float: right;
bottom: 60px;
right: 0px;
width: 50px;
height: 122px;
background: #ffffff;
// border-bottom: 1px solid #ddd;
div {
height: 122px;
// border-bottom: 1px solid #ddd;
// background: green;
display: flex;
flex-direction: row; /* 子元素横向排列 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
.stb-set {
.stb-img {
width: 30px;
height: 30px;
}
.stb-name {
display: block;
width: 28px;
height: 40px;
font-size: 14px;
color: #555555;
text-align: center;
// 字体
// font-family: PingFang;
}
}
}
}
}
.el-footer {
// 测试颜色
// background: orchid;
// border-top: 1px solid #e6e6e6;
.foot {
width: 1056x;
line-height: 40px;
text-align: center;
// 字体
// font-family: PingFangSC-Medium;
// font-weight: Medium;
.jing {
margin: 0 190px;
img {
// width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 8px;
}
}
div {
display: inline-block;
font-size: 12px;
color: #aaaaaa;
}
}
}
// /deep/.el-menu-item {
// background-color: red !important;
// }
}
</style>
<style lang="less">
.el-popover {
height: 100px;
padding: 0px;
}
</style>