Question

我不知道这是否可能仅使用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重叠到页脚。它与overflow：auto一起使用，但我为容器div出现了另一个垂直滚动条。

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

Answer 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 ......

Answer 2

可以仅使用HTML和CSS执行此操作。您可能会发现来自http://www.cssstickyfooter.com/的HTML和CSS代码的设置非常有用，因为它使用与您的代码相同的布局，并尝试实现类似的目标。

我已将用于创建粘性页脚的代码与下面的小提琴中的代码组合在一起：

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

Answer 3

由于具有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>

绝对位置和溢出：自动没有滚动条出现

3 个答案: