Question

我正在使用此CSS在屏幕中央显示表单。

.Absolute-Center 
{
    width: 40%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
}

不同的形式有不同数量的元素。例如，说登录表单有4个元素，忘记密码表单有2个元素，表单3有12个元素。

对我来说，登录表格完美显示。 PassWord表格在底部显示一些空白区域。和form-3显示滚动条以查看底部元素。

我不希望任何形式的空白区域或滚动条。

此CSS类需要进行哪些更改才能实现？

Answer 1

你需要删除注释掉的行：

.Absolute-Center {
    width: 40%;
    /* height: auto; */
    /* overflow: auto; */
    margin: auto;
    position: fixed;
    /* top: 0; */
    /* left: 0; */
    /* bottom: 0; */
    /* right: 0; */
}

将高度设置为50％意味着表单的高度将固定为其容器高度的50％，并将溢出设置为auto意味着如果表单大到适合该高度，则表示得到一个滚动条。通过删除这些行，您将允许浏览器根据内容设置表单的高度。您还需要删除顶部和底部属性，因为它们会在整个页面上拉伸div。

如何在没有滚动条和空白区域的情况下在中心显示表格

1 个答案: