网页效果 - 填充布局

最新推荐文章于 2023-07-25 10:37:05 发布

W&T

最新推荐文章于 2023-07-25 10:37:05 发布

阅读量404

点赞数

分类专栏：网页效果文章标签：定位 css html flex css3

本文链接：https://blog.csdn.net/qq_43612151/article/details/118789535

版权

网页效果专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、使用定位属性填充空间

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html, body {
        height: 100%;
      }
      .box {
        height: 100%;
        position: relative;
        background-color: yellow;
      }
      .box1 {
        height: 50px;
        background-color: red;
      }
      .box2 {
        position: absolute;
        // top 要跟height的数值一致
        top: 50px;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: blue;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2">
      </div>
    </div>
  </body>
</html>

缺点：需要根据box1计算或者设置box2的height

二、使用flex布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
     * {
        margin:0;
        padding:0;
      }
      html{
        height:100%;
        background-color: green;
      }
      body{
        height:100%;
        background-color: red;
      }
      .box{
        height:100%;
        display: flex;
        flex-direction: column;
      }
      .box1{
        width: 100%;
        height: 50px;
        background-color: yellow;
      }
      .box2{
        width: 100%;
        height: 100px;
        background-color: grey;
        flex: 1;
        overflow: scroll;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2">
      </div>
    </div>
  </body>
</html>

解决了需要知道box1的高度问题

flex: 1 的作用

通过元素审查我们容易得知

flex: 1是一个简写属性，它相当于 flex: 1 1 0%

详细属性是flex-grow: 1;flex-shrink: 1;flex-basis: 0%;

flex-grow 属性用于设置或检索弹性盒子的扩展比率。
注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

flex-basis 属性用于设置或检索弹性盒伸缩基准值。
注意：如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。

通俗来讲，如果在flex布局中，容器有剩余空间，flex-grow设置元素利用剩余空间的比率；如果元素空间之和大于容器空间，flex-shrink设置元素的缩小比率；而flex-basis，则是给可伸缩项在容器中分配初始大小.

W&T

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页效果 - 填充布局

一、使用定位属性填充空间<!DOCTYPE html><html lang="en"> <head> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } .box { height: 100%; position: relati
复制链接

扫一扫