我試圖創建一個沒有滾動條的全屏網站，但在定義邊距時遇到了問題。給出一個最小的例子:
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>body元素是一個非浮動的塊元素，就像包含的h1元素一樣。因此，bodyelement的大小/位置適應于它的子元素h1，它有一個被定義為默認的邊距(margin-top)。
你的問題有多種解決方案，一種是讓body-element浮動。這樣做的好處是(與刪除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>只需將margin-top:0；在你的h1上。這里的例子
我建議使用CSS重置來避免這樣的問題。埃里克·邁耶的非常有名，也很簡單。
當開始一個新項目時，或者作為一個通用規則，總是試圖重置瀏覽器“添加”的大量預定義css值。已經創建了一些“css重置”樣式表，您可以在google搜索中找到，但是對于一個簡單的解決方案，您總是可以從以下內容開始:
* { margin: 0; padding: 0;}然后你可以添加額外的規則來影響你文檔中的所有元素，比如“字體系列:sans-serif”等等。 這樣，您就可以確保有一個堅實的起點，而不會有太多不同瀏覽器的不同外觀。
稍后，您可以更明確地將規則添加到需要樣式化的元素中
這是我如何做一個全屏網站，它非常簡單和干凈:
<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%停留在窗口中，不管它的大小。這樣你就不會有滾動條的問題了。
這就是為什么像normalize.css這樣的東西經常被添加到一個項目中，以避免在不同的瀏覽器中出現這些問題。身高:100vh會有用的。要獲得滾動條，你也可以使用overflow-y:hidden；或者溢出-x:隱藏；視情況而定。
試試這個:
.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;
}