页面头部和左侧固定并撑满,只有右侧部分内容改变的布局实现
页面头部和左侧固定并撑满,只有右侧部分内容改变的布局实现
YXMBetter 发表于8个月前
页面头部和左侧固定并撑满,只有右侧部分内容改变的布局实现
  • 发表于 8个月前
  • 阅读 20
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

  • 经常会用到这种布局,怎样实现呢?
<style>
    html{
        height:100%;
    }
    body{
        height:100%;
        margin: 0px;
    }
    .all{
        height:100%;
    }
    .top{
        height:50px;
        position:fixed;
        background-color:blue;
    }
    .left{
        width:15%;
        height:100%;
        position:fixed;
        top:50px;
        left:0px;
        background-color:green;
    }
    .contentbg{
        width:85%;
        height:100%;
        position:fixed;
        top:50px;
        left:85%;
        background-color:orange;
    }
    .content{
        width:85%;
        position:relative;
        left:15%;
        top:50px;
        background-color:red;
    }
</style>
<template>
   <!-- 嵌套在body中  -->
<div class="all">
    <div class="top">1</div>
    <div class="left">2</div>
    <div class="contentbg">3</div>
    <div class="content">4</div>
</div>
</template>
  • 试试吧,一定要记住,所有的元素都放在直接能撑开body宽度的盒子了,直接子元素,不能嵌套,不然会被内容撑开高度而不是所有的浏览器高度了。
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 6
博文 156
码字总数 104132
×
YXMBetter
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: