CSS布局

最新推荐文章于 2024-10-10 09:26:42 发布

兜小糖的小秃毛

最新推荐文章于 2024-10-10 09:26:42 发布

阅读量86

点赞数

分类专栏： CSS 文章标签： css html vue.js

本文链接：https://blog.csdn.net/Roy__Jason/article/details/116743429

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

CSS布局

上下固定，中间自适应

<template>
  <div class="layout">
    <div class="header"></div>
    <div class="content">
        <div>上下固定，中间自适应</div>
    </div>
    <div class="footer"></div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less">
@HHeight:80px;
@BHeight:100px;
* {
  margin: 0;
  padding: 0;
}
.header {
  position: absolute;
  top: 0;
  height: @HHeight;
  width: 100%;
  background-color: pink;
}
.content {
  position: absolute;
  top: @HHeight;
  bottom: @BHeight;
  width: 100%;
  overflow: auto;
  background-color: aquamarine;
}
.footer {
  position: absolute;
  bottom: 0;
  height: @BHeight;
  width: 100%;
  background-color: skyblue;
}
</style>

两栏布局–右边自适应

<template>
    <div class="layout">
        <div class="left">left</div>
        <div class="right">两栏布局--右边自适应</div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="less">
.layout {
    display: flex;
    height: 100vh;
}
.left {
    width: 100px;
    height: 100%;
    background: pink;
}
.right {
    background: powderblue;
    height: 100%;
    flex:1
}
</style>