---
# System prepended metadata

title: 不輕易寫死高度的藝術

---

# 不輕易寫死高度的藝術
---

https://ithelp.ithome.com.tw/m/articles/10237655

## 如何寫表尾footer

div class="footer"
p>lorem20

.footer{
background:#000;
color:#fff;
height:100px;
}
如果寫死高度字會超出去
![](https://i.imgur.com/S3fOaS1.png)

用padding-top:10px;
![](https://i.imgur.com/8VshjL6.png)
padding:20px opx;// 推上下20px 左右推0px;

這樣做寫死高度寬度，按鈕字太多會破圖
![](https://i.imgur.com/pBVSF5W.png)
---
### 按鈕padding
---
按鈕也用padding:0.375rem;
![](https://i.imgur.com/W2wNivK.png)

## 背景圖案撐滿版面
![](https://i.imgur.com/AOhDnn6.png)

```
<div class="container">
    <div class="headr"></div>
    <div  class="banner"></div>
    <div class="contant></div>
    
```

```css=
.header{
hight= 50px;


}
.banner{
height:calc(100vh);
url(https://imges.unsplash.com/photo)
backgound-size:cover;

}

```
##### backgound-size 指令 自動適應
![](https://i.imgur.com/SYAswJS.jpg)

#  縮小的時候怎麼讓圖片看到中間？
問題如圖：如何讓圖centar被看到？
![](https://i.imgur.com/HGJMWJN.jpg)
正中間的主視覺？？
![](https://i.imgur.com/EIodV5G.png)
用兩個centar centar