使 CSS 適應不同的螢幕尺寸：指南

Question

我有這個CSS 程式碼，我的問題是，由於padding-top （從頂部有一些空間）我的頁面太大，導致它具有「滾動」選項，並且不適合整個螢幕。

如何才能停用滾動選項？

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}
body {
    color: #444;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f7f7f7;
}
.container {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding-top: 20px;
}

我嘗試添加 overflow:hidden; ，它可以工作，但它會切斷底部的一些 div

Answer 1

將 box-sizing: border-box; 加到 .container，以將填入包含在 height 的百分比值中。