如何使用CSS3屬性控制元素充滿整個(gè)頁面并計(jì)算值
場景描述有這么一個(gè)場景:一個(gè)頁面頭部的高度為100px,要使下半部分充滿整個(gè)頁面,不管頁面大小。起初,我想到的是使用JavaScript代碼控制,但是也可以使用CSS3中的計(jì)算屬性控制。步驟一為了實(shí)現(xiàn)
場景描述
有這么一個(gè)場景:一個(gè)頁面頭部的高度為100px,要使下半部分充滿整個(gè)頁面,不管頁面大小。起初,我想到的是使用JavaScript代碼控制,但是也可以使用CSS3中的計(jì)算屬性控制。
步驟一
為了實(shí)現(xiàn)上述場景,需要一個(gè)頁面作為展示效果,創(chuàng)建一個(gè)靜態(tài)頁面。
```html
body {
width: 100%;
height: 100%;
}
header {
height: 100px;
background-color: blue;
}
content {
height: calc(100% - 100px);
background-color: red;
}
```
步驟二
在`
`標(biāo)簽元素內(nèi)插入三個(gè)div,一個(gè)外層,另兩個(gè)是內(nèi)層。```html
```
步驟三
在`