网页大小调整问题

Question

我有一个我正在制作的网页，其中包含一个中心表格。当我的浏览器全屏时它工作正常，但当我使浏览器变小（或当我使用浏览器空间较少的计算机，如Mac）时，表的一部分被切断，它不会让我滚动看到整张桌子。下面的图片显示了页面的外观和截止时间。

这是表格的CSS：

#inputTable {
    width:600px;
    height:780px;
    position:absolute;
    margin-left: -300px;
    margin-top: -390px;
    top:50%;
    left:50%;
    box-shadow: 5px 5px 5px 5px #06246F;
    table-layout:fixed;
    overflow:auto;
}

Answer 1

这是你的CSS中的一些事情的混合导致你的问题（正如其他人所说）。解决方案可能是采用不同的方法来集中内容。

分别使用容器和内容div与显示表和显示表单元格。

.container
{
    width:100%;
    height:100%;
    display:table;
    text-align:center;
}
.content {
    display:table-cell;
    vertical-align:middle;
}

我做了an example in JSFiddle。

您可以始终对较大的屏幕使用最大宽度和高度，但您需要百分比以确保它在较小的设备上可见。

Answer 2

如果你想让div居中，你应该避免绝对位置，除非你真的需要它。

#inputTable {
    width:600px;
    height:780px;
    box-shadow: 5px 5px 5px 5px #06246F;
    table-layout:fixed;
    overflow:auto;
    text-align:center;
    margin: 100px auto 0;
}  

根据您的需要设置保证金 这是jsfiddle。