# 關於目前已知的全域css設定
###### tags: `開工`

## 為甚麼要寫這個
> 有些分頁設定的CSS為全域CSS，影響到其他分頁

> 我想設定body跟div的height為100%
## 你可能會嘗試...
### 1. 先用scoped的方式設定，但發現沒有用

<script scoped>
body, div {
    height: 100%;
}
<script>

### 2. 把scoped拿掉，發現能work!

<script>
body, div {
    height: 100%;
}
<script>


:::danger

**把scope拿掉之後，整個網頁都吃到你的css大補丸呢!**

:::

// 每個頁面都有
body, div {
    height: 100%;
}
// Everywhere on the website

## 怎麼解決上面遇到的問題?
**用Nuxt.js裡面的Layout!!**

### 1. layout是甚麼?
定義所有頁面都會共同用到的HTML, CSS

> 預設會抓layout/default.vue

詳情可以參考Nuxt.js官方 [文件1](https://nuxtjs.org/docs/2.x/concepts/views), [文件2](https://nuxtjs.org/docs/2.x/directory-structure/layouts)

### 2. 實際解決方法
假設我是index分頁，我要自訂在index分頁中body及div height為100%

1. 首先在layout建立`index.vue`
2. 在`index.vue`的`<script>`中加入`head`以及`bodyAttrs`，設定這個分頁的class
3. `index.vue`內容:

// layout/index.vue

<template>
    <div>
        <Nuxt />
    </div>
</template>

<script>
export default {
    head: {
        bodyAttrs: {
            class: "index-layout"
        }
    }
};
</script>

<style lang="scss">
.index-layout {
    body, div {
        height: 100%;
    }
}
</style>

4. 在`pages/index.vue`中配置自訂的layout

// pages/index.vue

<script>
export default {
    layout: "index"    // layout資料夾中的那個layout檔案名稱
}
</script>

:::warning
一定要用head的方式設定自訂的css，否則css還是會被所有頁面吃到
:::

### 3. 如果我不想要default的css

// layout/[you_name_it].vue

<script>
export default {
    head: {
        bodyAttrs: {
            class: ""
        }
    }
};
</script>

### 4. [GitHub ISSUE](https://github.com/nuxt/nuxt.js/issues/3877)
> [name=Mango] This is still broken in 2.15.7