0 
<!DOCTYPE html>
<html><head><style>
html, body{
    width: 99%; /* to prevent scroll bar when unnessery */
    height: 100%;
}
div#main_container{
    position: absolute; 
    top: 50%; margin-top: -200px;
    left: 50%;  margin-left: -400px;
    width: 800px; height: 400px;    
    border: 1px solid black;
}
</style></head><body>
<div id='main_container'>
     Some content
</div>
</body></html>

问题：如果我让浏览器的窗口比我的内容块小，我看不到块的顶部和左侧 - 滚动条看起来像我在内容的顶部\左侧的最大值，但没有顶部和右侧我的街区被看到了。

为什么会发生以及如何解决？

我在 3 个浏览器中进行了测试，所以这不是浏览器问题。

4

1 回答 1

3

它发生是因为它注定要发生。让我们计算一下高度为 200 像素的浏览器。

那么，200px 的 50% 是多少？datarara .. 它是 100 像素。这使得 y 轴的顶部为#main_container100px。给它一个 -200px 的边距，它会上升 200px。如果它位于 100px 并且向上移动 200px，则#main_container顶部将放置在 -100px 处。难怪它的一部分是隐藏的。

解决方案

一个解决方案是使position: absoluteon#main_container相对于body元素而不是浏览器窗口（即： set position:relativeon body）。然后，通过设置 amin-height和min-widthonbody等于#main_container'sheight和width（分别），无论窗口变得多短，主体的尺寸永远不会小于#main_container- 不可能“溢出”。

然而，将这些样式应用于body元素，假设您在页面上只有一个绝对定位的框。如果不是这种情况，那么#main_container用它自己的包装div可能是最兼容的解决方案。这是解决方案：

的HTML 

<div class="wrap">
    <div class="box"></div>
</div>

CSS

.wrap {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    min-width: 800px; min-height: 400px;
}

.box{
    position: absolute;
    top: 50%; margin-top: -200px;
    left: 50%;  margin-left: -400px;
    width: 800px; height: 400px;    
    border: 1px solid black;
}
于 2012-07-14T02:51:35.833 回答