Menyesuaikan CSS kepada saiz skrin yang berbeza: Panduan

Question

Saya mempunyai kod CSS ini dan masalah saya ialah disebabkan oleh padding-top (sedikit ruang dari atas) halaman saya terlalu besar menyebabkan ia mempunyai pilihan "tatal" dan tidak muat di seluruh skrin.

Bagaimana saya boleh melumpuhkan pilihan menatal?

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

Saya cuba menambah overflow:hidden; dan ia berfungsi tetapi ia memotong beberapa bahagian bawah

Answer 1

Letak box-sizing: border-box; 添加到 .container，以将填充包含在 height dalam nilai peratusan.