圣杯布局，宽高自适应思路

最新推荐文章于 2023-11-05 23:45:24 发布

Romandisea

最新推荐文章于 2023-11-05 23:45:24 发布

阅读量247

点赞数

分类专栏： css你学废了吗文章标签： css

本文链接：https://blog.csdn.net/weixin_49200148/article/details/107642833

版权

css你学废了吗专栏收录该内容

3 篇文章 0 订阅

订阅专栏

元素宽高自适应大家第一时间想到的肯定是百分比，但是百分比对于不熟悉的人都不太友好，元素的百分比取决与父级元素的宽高，宽度百分比很好实现，但是高度一般用px表示，因为很少有人给元素设置固定的值，想要实现高度自适应其实只需要一行代码，不多bb了上代码

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            text-align: center;
        }
        
        body,
        html {
            width: 100%;
            height: 100%;
             /* 给body加上高度之后他的子元素就可以使用百分比了 */
        }
        
        header {
            width: 100%;
            height: 20%;
            background: pink;
            
        }
        
        aside:nth-child(2) {
            width: 200px;
            height: 70%;
            background: #5f5;
            float: left;
            
        }
        
        aside:nth-child(3) {
            width: 200px;
            height: 70%;
            background: #5f5;
            float: right;
           
        }
        
        main {
            width: clac(100% - 400px);
            height: 70%;
            background: #ccc;
       }
        
        footer {
            width: 100%;
            height: 10%;
            background: #911;
           
        }
    </style>
</head>

<body>
    <header>头</header>
    <aside>左</aside>
    <aside>右</aside>
    <main>身体</main>
    <footer>脚</footer>
</body>