HTML标签根据浏览器窗口大小自适应

最新推荐文章于 2024-07-25 11:52:08 发布

小王讨厌洋葱

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量5.2k

点赞数 2

文章标签： html 前端 css

本文链接：https://blog.csdn.net/wsdnnnnnnnnn/article/details/128903281

版权

1.使用calc实现自适应（需要父盒子宽高固定）

<style>
        *{
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        .container {
            height: 100%;
            width: 100%;
            background-color: bisque;
        }
        .top {
            height: 100px;
            background-color: skyblue;
        }
        .middle {
            width: 100%;
            height: calc(100% - 200px);
            background-color: aquamarine;
        }
        .middleTop {
            width: 100%;
            height: 66px;
            background-color: aliceblue;
        }
        .middlebottpm {
            width: 100%;
            height: calc(100% - 66px);
            background-color: red;
        }
      .bottom {
        height: 100px;
        background-color:pink;
      }
     
    </style>

    <div class="container">
        <div class="top"></div>
        <div class="middle"></div>
        <div class="bottom"></div>  
    </div>

2.使用flex布局，两栏布局，三栏布局

/*两栏布局*/
<style>
    *{
        margin: 0;
        padding: 0;
    }

    .box {
       height: 1000px;
        display: flex;
    }

    .left {
        width: 100px;
        height: 100%;
        background-color: aqua;

    }

    .right {
        height: 100%;
        flex: 1;
        background-color: silver;
    }
</style>
<body>
      <div class="box">
        <div class="left"></div>
        <div class="right"></div>
      </div>
</body>

/*三栏布局*/
<style>
    *{
        margin: 0;
        padding: 0;
    }

    .box {
       height: 1000px;
        display: flex;
    }

    .left {
        width: 100px;
        height: 100%;
        background-color: aqua;

    }
    .middle {
        height: 100%;
        flex: 1;
        background-color: skyblue;
    }
    .right {
        height: 100%;
        width: 100px;
        background-color: silver;
    }
</style>


 <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
      </div>

文章就到这里啦，本人功力尚浅，若有不妥之处请谅解指正，谢谢！