HTML全屏幕側面不帶滾動條

我試圖創建一個沒有滾動條的全屏網站，並且在定義邊距方面存在問題。由於是最小的例子：HTML全屏幕側面不帶滾動條

html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background: yellow; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    background: green; 
 
} 
 

 
h1 { 
 
    background: gray; 
 
}

<body> 
 
     <h1>Heading 1</h1> 
 
    </body>

爲什麼我得到html元素在側上方的黃色背景？更令我驚訝的是，黃色部分消失了，如果我在h1元素之前添加文本。

html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background: yellow; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    background: green; 
 
} 
 

 
h1 { 
 
    background: gray; 
 
}

<body> 
 
     Add some text and the yellow part disappears. 
 
     <h1>Heading 1</h1> 
 
    </body>

是否有任何想法，以避免在頂部的黃色部分無標題元素之前添加文本？

來源

2016-06-23 Holger

嘗試使用谷歌搜索「摺疊邊緣」。 –

您的body元素是一個非浮動塊元素，就像包含的h1元素一樣。因此，body元素的大小/位置適應其子元素h1，該元素的邊距（margin-top）被定義爲默認值。

您的問題有多種解決方案，一種是使身體元素浮動。這樣做的好處是（與刪除h1上的邊距相比），即使插入了具有邊距的不同元素，我也將以相同的方式工作。

html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background: yellow; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    background: green; 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
h1 { 
 
    background: gray; 
 
}

<body> 
 
     <h1>Heading 1</h1> 
 
    </body>

html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background: yellow; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    background: green; 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
h1 { 
 
    background: gray; 
 
}

<body> 
 
     <h1>Heading 1</h1> 
 
    </body>

來源

2016-06-23 10:12:12 MattDiMu

只需在您的h1上放置margin-top:0;即可。 Example here

我推薦使用CSS重置來避免這樣的問題。 Eric Meyer's是非常知名和簡單。

來源

2016-06-23 10:09:49 Joseph

當開始一個新項目或作爲一般規則，總是嘗試重置很多是瀏覽器「添加」預定義的CSS值。有已經創造了一些「CSS復位」樣式，你可以用谷歌搜索找到，但對於一個簡單的解決方案，您可以隨時開始：

* { margin: 0; padding: 0;}

然後你就可以隨時添加額外的規則，這將影響中的所有元素你的文檔就像「font-family：sans-serif」等。這樣你就可以肯定你有一個穩定的起點，而不會在瀏覽器中看到太多不同的外觀。

後來你再可以更明確地添加規則需要造型元素

來源

2016-06-23 10:25:19 Winthxr1909

這是我會怎麼做全屏的網站，這是非常簡單和乾淨：

<body> 

<h1>Main heading</h1> 

</body>

的CSS代碼：

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

body { 
    background-color: green; 
    height: 100vh; 
} 

h1 { 
    color: #fff; 
    font-size: 40px; 
}

所以，如果你給你的身體100vh（視高度）的高度就會停留在窗口的100％，無論it.Like的大小這你不會有AP與滾動條的滾動。

來源

2016-06-23 10:26:06

這就是爲什麼經常像normalize.css被添加到一個項目，以避免這些東西與不同的瀏覽器等height: 100vh;將工作。要獲得滾動條的搭配，您還可以根據具體情況使用overflow-y: hidden;或overflow-x: hidden;。

來源

2016-06-23 10:34:20

試試這個：

.img-responsive { background-size: 100%; } 
OR 

.img-responsive { background-size: cover; }

相反img標籤，使用背景圖像全屏圖像。

<header> 
    <div class="menu_area">...</div> 
</header> 


html, body, header { 
    height: 100%; 
} 
header { 
    background-image: url('images/image1.jpg'); 
    background-size: cover; 
}

來源

2016-06-23 10:37:21 as7

HTML全屏幕側面不帶滾動條

回答

相關問題