Question

我有一个简单的登录框，它以页面中间（垂直和水平）为中心。

在这里你可以找到它的DEMO：

http://encodable.com/uploaddemo/files/login.html

问题是，每当我手动调整浏览器窗口大小时，div（#login-logout-box）的内容正在调整大小，如果有人试图在浏览器窗口中查看此登录表单，其高度低于{ {1}}，它应该向页面添加滚动条。但是atm而不是那个盒子只是被切断了。意味着在低分辨率下这种形式部分显示无法滚动：S（试过几部手机--Iphone和Android 2.3）

但我再次不希望380px可滚动但整页。

我已经检查了www和stackoverflow以获得可能的答案，但一无所获，如果问题不清楚我也很抱歉，我已尽力描述它。

Answer 1

您的代码根本不应在任何浏览器中运行。根据{{3}}，“固定位置大于页面区域的框已裁剪。”

只需将position: fixed;更改为position: absolute;

即可

#login-loguout-box {
    width: 380px;
    height: 380px;
    position: absolute;
    top: 45%;
    left: 50%;
    margin-left: -190px;
    margin-top: -190px;
    margin-bottom: 20px;
    border: 2px solid #cacaca;
}

W3C Spec

Working Code

Answer 2

使用css中的overflow设置，例如

overflow-x: auto; /* for horizontal scrolling*/
overflow-y: auto; /* for vertical scrolling */

如何使元素不要在窗口调整大小/分辨率更改时调整大小

2 个答案: