使 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 的百分比值中。