Question

<!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个浏览器中测试过，所以这不是浏览器问题。

Answer 1

这是因为它意味着发生。让我们来看一个浏览器的数学，它的高度为200px。

那么，200px的50％是多少？ datarara ..它是100px。这使得#main_container的顶部在y轴上为100px。给它一个-200px的余量，它上升200px。如果它是100px并且向上移动200px，#main_container的顶部放置在-100px。难怪为什么它的一部分是隐藏的。

解决方案

解决方案是在position: absolute上#main_container相对于body元素，而不是浏览器窗口（即：position:relative body }）。然后，通过设置min-height上的min-width和body等于#main_container的{{1}}和height（分别），无论多短窗口会变成，身体的尺寸永远不会小于width - 没有可能的“溢出”。

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

HTML

div

CSS

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

CSS中心：没有顶级＆amp;在小窗口看到的块的左边

1 个答案: