Question

我对绝对位置div有疑问。

我有类似

的东西

<div id='body-container'>
    <div id='content-wrapper'>
        contents....
    </div>
</div>

由于其他问题，我需要让我的body-wrapper具有绝对的位置。

我的css

#body-container{
    position: absolute;
    right: 0;
    left: 0;
    height: 100%;
    overflow-y: hidden;
}

我遇到了一个问题。在我的content-wrapper内，我有动态内容将被添加到里面。它将创建一个不需要的滚动条，div在该div中可以滚动。无论如何都要杀死滚动行为？非常感谢。

Answer 1

这可能有用......

    #body-container{
        position: relative;
    }
    #content-wrapper{
        position: absolute;
        right: 0;
        left: 0;
        height: 100px; /* Need to put an exact height */
        overflow: hidden;
    }

Answer 2

从height中移除#body-container属性，它将适合内容的高度。没有滚动条。

http://jsfiddle.net/QeFe5/

修改

如果你需要将包装器设置为全高，那么不要忘记设置top: 0属性，这样主体就不会创建滚动：

#body-container{
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    background: silver;
    height: 100%;
    overflow: hidden;
}

更新：http://jsfiddle.net/QeFe5/1/

Answer 3

如果您需要内容包装器来扩展整个页面，您可以使用顶部和底部进行绝对定位，并确保您的身体容器（以及它的封闭容器）的高度为100％。

#body-container{
  position: relative;
  height: 100%;
}
#content-wrapper{
  position: absolute;
  top: 0;
  bottom:0;
  right: 0;
  left: 0;
}

如何解决绝对位置问题？

3 个答案: