鍍金池/ 問答/HTML/ html不充滿整個瀏覽器是什么情況，有圖~

html不充滿整個瀏覽器是什么情況，有圖~

body里就一個<div id="#app"></div>元素,我想讓他居中

body{
    display: flex;
    flex-direction: column;
    align-items: center;
}

然后居中是居中了，但是旁邊有奇怪的留白...

clipboard.png

clipboard.png

當我選擇html元素的時候，它根本沒用充滿整個畫面
clipboard.png

代碼是這樣子的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script></script>
</body>
</html>
回答
編輯回答
過客

html 和 body 均設(shè)置寬高 100% 即可

2018年9月1日 08:54
編輯回答
選擇

你可以在html,body以下的樣式：

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow:hidden;
    box-sizing: border-box; // 這個是設(shè)置盒模型，方便計算寬高，可以去掉
}
2017年8月27日 01:20
編輯回答
朽鹿

可能是中間有子元素撐開了寬度，好好查下能找出來的

2017年1月15日 01:40
編輯回答
瘋子范

在遇到這種問題，可以在瀏覽器中打開開發(fā)者工具，查看相應元素看看是什么原因?qū)е碌?/p>

2018年9月19日 10:58
編輯回答
冷眸

瀏覽器會有一些默認的樣式，需要去掉，給你一個簡單的 css reset, 在所有樣式之前加載：

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box; // 這個是設(shè)置盒模型，方便計算寬高，可以去掉
}
*, *::before, *::after{
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}
2018年1月8日 02:27
編輯回答
疚幼

用火狐瀏覽器打開頁面，在開發(fā)者工具中找到 3D 堆疊的菜單，就可以看到是哪個元素的問題。屢試不爽?。。?！

2018年3月27日 04:41