我是 CSS 的新手，正在寻求以下方面的帮助。
我有一个 HTML 页面，其正文开头具有以下结构。
在正文中，我有一个带有“bgBanner”类的表单。
这样做的想法是只为表单设置背景图像，而不为 body 的其余部分设置背景图像。
在桌面上查看时一切正常，但在手机/智能手机上查看时，屏幕底部边缘的所有内容都被截断，而且那里没有滚动条。
由于我是新手，我想我的一种风格可能会覆盖另一种风格，或者我以错误的方式使用“溢出”。 有人可以帮我解决这个问题吗？
我的 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;
}
非常感谢您对此的任何帮助， 迈克
最佳答案
我通过从 form 和 #main 中移除溢出 + 通过更改 html 和 body 的 CSS 来实现它如下:
html, body {
height: 100%;
width: 100%;
}
html {
overflow: auto;
}
这对我现在在桌面和移动设备上都有效。
但是，由于我是新手，这可能不是最好的方法，所以如果有任何意见，请告诉我。
谢谢!
关于CSS:页面内容和背景图像在移动屏幕上被截断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31124238/