1

我不知道这是否可能仅使用 html 和 css，但我在相对容器中有一个绝对 div，并且希望在容器下有一个常规 div。

HTML：

<div id="container">

    <div id="content">
    </div>

</div>

<div id="footer">

</div>

CSS：

#container{


position:relative;
overflow:auto;



}

#content{

position:absolute;
width:955px;
z-index:1000;


}

目标是防止“内容” div 重叠到页脚中。它适用于溢出：自动，但我得到了另一个垂直滚动条出现在容器 div 中。

还有其他方法可以解决这个问题吗？

4

3 回答 3

1

那么，如何仅隐藏垂直滚动条：

#container {
    position: relative;
    overflow: auto;
    overflow-y: hidden;
}

?

如果您正在寻找更花哨的东西来隐藏滚动条，那么您可以使用 JavaScript mousescroll 事件来做到这一点。 http://viralpatel.net/blogs/2009/08/javascript-mouse-scroll-event-down-example.html 或者你可以使用一些 jquery 插件来处理滚动条，它们有很多，jScrollpane、Scrollable...

于 2012-08-15T03:10:54.117 回答
0

仅使用 HTML 和 CSS 就可以做到这一点。您可能会发现来自http://www.cssstickyfooter.com/的 HTML 和 CSS 代码的设置很有用，因为它使用与您的代码相同的布局并且试图实现类似的目标。

我在下面的小提琴中将用于创建粘性页脚的代码与您的代码相结合：

http://jsfiddle.net/bPybY/1/

于 2012-08-15T03:15:00.110 回答
0

您必须以不同方式更改布局，因为具有absolute位置的元素没有布局空间。像这样：

<html> 
<head>
<style>
#container{
position:relative;
}
#absoluteContent{
position:absolute;
width:955px;
z-index:1000;
}
</style>
</head>
<body>
<div id="container">
  <div id="absoluteContent">
    <div id="content">content
    </div>
    <div id="footer">footer
    </div>
  </div>
</div>
</body>
</html>
于 2012-08-15T20:00:00.593 回答