如何使用CSS3屬性控制元素充滿整個頁面并計算值
場景描述有這么一個場景:一個頁面頭部的高度為100px,要使下半部分充滿整個頁面,不管頁面大小。起初,我想到的是使用JavaScript代碼控制,但是也可以使用CSS3中的計算屬性控制。步驟一為了實現(xiàn)
場景描述
有這么一個場景:一個頁面頭部的高度為100px,要使下半部分充滿整個頁面,不管頁面大小。起初,我想到的是使用JavaScript代碼控制,但是也可以使用CSS3中的計算屬性控制。
步驟一
為了實現(xiàn)上述場景,需要一個頁面作為展示效果,創(chuàng)建一個靜態(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)插入三個div,一個外層,另兩個是內(nèi)層。```html
```
步驟三
在`