CSS：页面内容和背景图片在手机屏幕上被截断

Question

我是 CSS 的新手，正在寻求以下方面的帮助。

我有一个 HTML 页面，其正文开头的结构如下。在主体内部，我有一个带有 class“bgBanner”的表单。

这样做的想法是只为表单设置背景图像，而不为正文的其余部分设置背景图像。

在桌面上查看时一切正常，但在手机/智能手机上查看时屏幕底部边缘的所有内容都被截断而且我不明白那里有一个滚动条。

由于我是新手，我想我的一种风格可能会覆盖另一种风格，或者我使用 "overflow" 的方式不对。 有人可以帮我解决这个问题吗？

我的HTML:

<!-- ... -->
<body>    
    <div class="wrapper">
        <?php require_once("includes/menu.php"); ?>
        <section id="main">
            <form id="frmLogin" class="bgBanner">
            <!-- ... -->

我的CSS:

html, body {
    height: 100%;
    overflow: auto;
    width: 100%;
}
body {
    margin: 0;
    padding: 0;
}
form, #main {
    height: 100%;
    overflow: auto;
}
#main {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-left: 8.33%; /* col-1 */
    margin-right: 8.33%; /* col-1 */
    overflow: hidden;
}
.bgBanner {
    background-image: url('../images/banner-M.jpg');
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 600px;
}

非常感谢您对此提供的任何帮助，麦克

Answer 1

使用#main {overflow-y: scroll}

Answer 2

我通过从 form 和 #main + 中更改 html 和 body 的 CSS 来消除溢出，如下所示：

html, body {
    height: 100%;
    width: 100%;
}
html {
    overflow: auto;
}

我现在在台式机和移动设备上都可以使用。
但是，由于我是新手，这可能不是最好的方法，所以如果有任何意见，请告诉我。

谢谢！

CSS：页面内容和背景图片在手机屏幕上被截断

CSS: Page content and background image getting cut off on mobile screen

css

screen

background-image

media