0

现在我有一个总高度设置为 750 像素的网站。我使用绝对位置和负边距方法将其垂直居中。除了一个问题，它的效果很好。

如果我尝试在分辨率较低的显示器或移动设备上使用它，它会切断页面顶部。

这是我的代码

HTML

<body>
<div class="content">
CONTENT IS HERE
</div>
</body>

CSS

.content {
position:absolute;
top:50%;
height:750px;
margin-top:-375px; /* Half of 750px */
}

我尝试使用溢出：滚动；在身体标签上，但我知道它不起作用，我没想到它会起作用。我完全被难住了！有什么建议吗？

4

3 回答 3

4

您可以在小屏幕上使用mediaquery覆盖它：

.content {
    position:absolute;
    top:50%;
    height:750px;
    margin-top:-375px;
}
@media only screen and (max-height: 750px){
    .content {
        top:0;
        margin-top:0;
    }
}

实际上，这是一种优雅的降级方法，但如果您正在为移动设备进行设计，您可能希望以渐进增强的方式进行处理。在这种情况下，它变成：

.content {
    height:750px;
}
@media only screen and (min-height: 751px){
    .content {
        position:absolute;
        top:50%;
        margin-top:-375px;
    }
}

谈到兼容性，only关键字 after@media阻止旧浏览器呈现包含的规则。

要达到（几乎）完全兼容，您可以使用这个非常有用的插件：respond.js

于 2012-09-25T22:40:16.623 回答
0

就滚动而言，

overflow:auto;

可能是您想要的，因为这会导致滚动条出现。

您遇到的这个总体问题是为什么几乎总是相对地进行尺寸调整。相对于百分比，或相对于 javascript 来确定客户端的可视区域。

另请注意，

.class {

与您的定义不符class="content"。这是一个逻辑错误，应替换为

.content {
于 2012-09-25T22:26:13.307 回答
-2

尝试类似的东西

margin-top:-25%;

这样它在任何浏览器窗口高度都是一样的

高度也一样，使用百分比组合，而不是像素。

于 2012-09-25T22:25:16.800 回答