CSS 面试

【CSS】写出上下两栏响应布局

大盒子高度为100%，不能出现纵向滚动条，上盒子高度为100px，下盒子填充剩余高度

Posted by ARTROY on 2018-06-23

问题：

大盒子高度为100%，不能出现纵向滚动条，上盒子高度为100px，下盒子填充剩余高度
问题

回答：

解决方案（1）绝对定位；（2）box-sizing、margin；（3）calc。

公共代码

html代码：

1
2
3
4
<section class="layout">
  <div class="top"></div>
  <div class="bottom"></div>
</section>

css代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
* {
  padding: 0;
  margin: 0;
}
html, body {
  width: 100%;
  height: 100%;
}
.layout {
  width: 100%;
  height: 100%;
  background: #000;
}
.top {
  width:100%;
  height: 100px;
  background: #099;
}
.bottom {
  background: #ff9800;
}

方案一：绝对定位

1
2
3
4
5
6
7
8
9
10
.layout {
  position: relative;
}
.bottom {
  position: absolute;
  top: 100px;
  right: 0;
  bottom: 0;
  left: 0;
}

方案二：box-sizing、margin

1
2
3
4
5
6
7
8
9
10
.layout {
  box-sizing: border-box;
  padding-top: 100px;
}
.top {
  margin-top: -100px;
}
.bottom {
  height: 100%;
}

方案三：calc

1
2
3
4
5
6
7
8
9
10
11
html, body, .layout {   
  width: calc(100%);
  height: calc(100%);
} 
/* 
 * 此处可不写上面部分也会实现，但是如果嵌套太多，
 * 上层不写calc，接下来的calc可能会实现不了
 */
.bottom {
  height: calc(100% - 100px);
}

赏 支付宝打赏 微信打赏

欣赏此文，打赏一下



标签
CSS 面试
参与社区
-->