search

GenweiWu / Blog

个人技术能力提升
MIT License
4 stars 0 forks source link

设置height:100%页面出现滚动条 #57

Closed GenweiWu closed 5 years ago

GenweiWu commented 5 years ago

html


<!DOCTYPE html>
<html>


> css
```css
html,
body {
  height: 100%;
  margin: 0;
}

.area {
  box-sizing: border-box;
  height: 100%;
  background: red;
  /* 块格式化上下文来规避 外边距合并 */
  /* overflow:auto; */
  /* padding-top:1px; */
}

.inner1 {
  height: 200px;
  background: yellow;
  /* (1)子元素的margin会导致滚动条出现 */
  margin-top: 10px;
}

出现滚动条 image

GenweiWu commented 5 years ago

原因

类似inner1的内部元素，和最外面的area会出现外边距合并，导致出现滚动条

修复

规避外边距合并

/* 块格式化上下文来规避 外边距合并 */
  /* overflow:auto; */
  /* padding-top:1px; */