HTML标签根据浏览器窗口大小自适应-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML标签根据浏览器窗口大小自适应。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>

文章就到这里啦，本人功力尚浅，若有不妥之处请谅解指正，谢谢！文章来源地址https://www.toymoban.com/news/detail-509275.html

到了这里，关于HTML标签根据浏览器窗口大小自适应的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！