如何让CSS适配屏幕尺寸？禁用滚动条且不截断底部内容

你遇到的问题根源是CSS默认的box-sizing: content-box规则：元素的height仅计算内容区域，padding会额外增加元素总高度，所以height:100%加上padding-top:20px后，容器总高度超过视口，进而出现滚动条。以下是几种实用的解决方法：

方法1：使用box-sizing: border-box #

给.container添加box-sizing: border-box，让元素的height包含padding和border区域，这样height:100%会把padding-top算在内部，不会超出视口：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 全局设置可避免后续其他元素出现同类问题 */
}

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;
}

方法2：用calc()计算容器高度 #

直接通过calc(100% - 20px)设置容器高度，把padding-top的数值从视口高度中扣除：

.container {
    margin: 0 auto;
    width: 100%;
    height: calc(100% - 20px); /* 减去padding-top的20px */
    padding-top: 20px;
}

这种方法不需要修改box-sizing，适合仅需单独调整该容器的场景。

方法3：将padding-top转移到body上 #

如果顶部空间是页面整体的预留区域，可以把padding-top加到body上，同时给body设置box-sizing: border-box，这样容器的height:100%就能完全适配视口：

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

内容的提问来源于stack exchange，提问作者Relys