Question

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

我的HTML页面在其正文的开头有以下结构。在身体内部，我有一个类别为“bgBanner”的表单。

这个想法是仅为表单设置背景图像，而不是为身体的其余部分设置背景图像。

在桌面上查看时，一切看起来都不错，但在移动设备/智能手机上查看时一切都会在屏幕的底部边缘被切断，而我在那里没有滚动条。

由于我是新手，我猜我的一个样式可能会覆盖另一个样式，或者我正在以错误的方式使用“溢出”。 有人可以帮我这个吗？

我的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

我通过更改form和#main的CSS删除html和body +的溢出来实现此目的，如下所示：

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

这对我现在在桌面和移动设备上都很有用但是，因为我是新手，所以可能不是最好的方法，所以如果有任何意见，请告诉我。

谢谢！

Answer 2

使用#main {overflow-y: scroll}

CSS：页面内容和背景图像在移动屏幕上被切断

2 个答案: