用最简单的代码同时实现自适应宽度和高度的布局效果

最新推荐文章于 2024-03-08 14:46:11 发布

呦不错哦

最新推荐文章于 2024-03-08 14:46:11 发布

阅读量720

点赞数

分类专栏：前端文章标签：高度自适应宽度自适应

本文链接：https://blog.csdn.net/qq_25695065/article/details/88878912

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

html代码：

<header class="header"></header>
<aside class="aside"></aside>
<main class="main"></main>

css代码：

.header{
  width: 100%;
  height: 60px;
  background-color: #B3C0D1;
}

.aside{
  position: absolute;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 300px;
  background-color: #D3DCE6;
}

.main{
  position: absolute;
  top: 60px;
  right: 0;
  left: 300px;
  bottom: 0;
  background-color: #E9EEF3;
}

效果展示：
在这里插入图片描述