最近有個項目需要寫一個web應(yīng)用，但是我前端基礎(chǔ)太差，以前用過vue，這就摸索著來把。由于寫一個單頁面應(yīng)用，頁面需要占滿全屏。就百度了方法,

用vue-cli安裝了工程之后

index.html 里設(shè)置css樣式:

? ? html,body{

? ? ? ? height:100%;

? ? ? ? width:100%;

????????border:hidden;

????????overflow:hidden;

????}

主App.vue里設(shè)置app_div的樣式：在已有#app中添加 height=100%? 和 width=100%，然后在Login里設(shè)置width=100%，height=100%，background-color： black

但是運行之后會瀏覽器左邊和上面部分出現(xiàn)窄窄的留白，chrome按F12調(diào)試發(fā)現(xiàn)div.main 和html的長寬是一樣的，這就很奇怪了。

然后注釋掉index.html里的隱藏滾動條，發(fā)現(xiàn)html頁面內(nèi)容大小會超過瀏覽器大小而出現(xiàn)了滾動條。猜測很有可能是內(nèi)部div沒對于body有居左居上而導(dǎo)致有留白。于是加上margin=0，padding=0，均無效，又加上border=hidden也無效

后面繼續(xù)搜索資料發(fā)現(xiàn)在div#app里加上

{

padding:0px;

margin:0px;

position:absolute;

top:0px;

left:0px;

width:100%;

height:100%;

border:hidden;

}

最后解決了留白問題