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

发布于 2024-09-03 07:27:16 字数 902 浏览 8 评论 0原文

我已经实现了一个聊天脚本，它需要一个绝对定位的 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 */
}

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

谢谢，

蒂姆

原文

I have implemented a chat script which requires an absolutely positioned DIV to be wrapped around the pages content.

This is to ensure the chat windows stay at the bottom.

The problem is that because of the absolute positioning of this main wrapper, all other absolutely positioned elements (eg. Jquery Auto-completes, datepicker's etc) now scroll up and down with the page.

Here is an example of the HTML:

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

The DIV "main_container" style looks like this:

#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 */
}

I hope there is a simple fix as the chat script is too good to get rid of.

Thanks,

Tim

分享到QQ

分享到微博