Question

我已经实现了一个聊天脚本，需要将绝对定位的DIV包裹在页面内容中。

这是为了确保聊天窗口位于底部。

问题在于，由于这个主包装器的绝对定位，所有其他绝对定位的元素（例如，Jquery自动完成，日期选择器等）现在随页面向上和向下滚动。

以下是HTML的示例：

<body>
<div id="main_container">
    <div id="content">Elements like Jquery Autocompletes, Datepickers with absolute positioned elements in here</div>
</div>

DIV“main_container”样式如下所示：

#main_container {
    width:100%;
    background-color:#ffffff; /* DO NOT REMOVE THIS; or you'll have issue w/ the scrollbar, when the mouse pointer is on a white space */
    overflow-x: hidden;
    overflow-y: scroll;
    height:100%;    /* this will make sure that the height will extend at the bottom */
    position:absolute; /* container div must be absolute, for our fixed bar to work */
}

我希望有一个简单的解决方法，因为聊天脚本太好了，无法摆脱。

谢谢，

添

Answer 1

你可能最擅长制作相对于视口的固定位置，位置：固定;。
背景颜色看起来很糟糕。
你可以使sorrounding element（main）位置：relative而不给它top / left / right / bottom属性和每个“fixed”元素，position：absolute，因为它们现在将相对于有位置的父级：相对
如果这些都不起作用，请发布更多代码，特别是对于“向上和向下滚动页面的元素”的定位。目前还不清楚你对“页面”的意思。身体？ HTML吗？视口？主要内容？

CSS绝对DIV导致其他绝对DIV问题

1 个答案: