【问题标题】:Max height container with very tall fixed position container inside it最大高度容器,里面有非常高的固定位置容器
【发布时间】:2013-04-22 11:33:05
【问题描述】:

遇到一个非常基本的 CSS 问题。

我有一个最大高度为 655 像素的容器。现在该容器的最右侧是一个固定位置的容器(由于我正在做的事情,它必须是固定的位置)。固定位置容器的高度大得离谱。

它需要这个高度,因为它会充满内容,您最终会通过单击按钮和一些 javascript 看到这些内容。 (改变scrollTop)

我不是 100% 确定我做错了什么,但我基本上只需要 655px 的固定位置容器来显示。我不太确定为什么这不能按照我的设置方式工作。

在这里查看 JS 小提琴:http://jsfiddle.net/BG2bu/

.tall {
background-color:blue;
position:absolute;
right:0px;
width:200px;
height:5000px;
}

我正在使用这个 CSS 来定义 tall 容器。而且我知道如果我将位置更改为绝对位置,它将限制在其父容器的最大高度。由于其他原因,我真的需要修复这个容器。有没有办法做到这一点?我在这里遗漏了一些简单的东西吗?

如果这可以通过 JS/Jquery 解决方案来完成,我绝对愿意。

【问题讨论】:

    标签: javascript jquery html css


    【解决方案1】:

    不确定这是否适合您的需求,但我已将 .tall div 与另一个容器包装在一起,因为 position:fixed 不会在其容器 div 中遵守 overflow:hidden

    http://jsfiddle.net/3DZ53/

    【讨论】:

    • 完美!正是我想要的。感谢您的帮助!
    【解决方案2】:

    很难说这是否适合你的需要,但你能...

    .tall {
        max-height: 655px;
        overflow: scroll / hidden;
    }
    

    【讨论】:

    • 不,不幸的是,这对我不起作用。 .tall 容器充满了许多绝对定位的元素,当我更改最大高度时,这些元素似乎会发生变化。
    • 很难在没有更好地了解您要完成的工作的情况下提供进一步的建议。可以分享一个链接吗?
    • 这有点乱,但是:jsfiddle.net/nPXMj 基本上我有一个水平容器和一个嵌套在其中的高垂直容器。当您到达特定点时,水平滚动条控制垂直容器的滚动。本质上,我是通过更改容器的顶部和左侧位置来做到这一点的……当高容器装满内容时,这会导致非常混乱的结果。尝试编辑该代码以使其在通过 1438 像素后垂直容器变为 FIXED...问题是当它修复后,它不再监听父母的高度。
    猜你喜欢
    • 2021-12-03
    • 2015-07-08
    • 1970-01-01
    • 1970-01-01
    • 2019-03-28
    • 1970-01-01
    • 2016-08-06
    • 2021-06-17
    • 2012-04-08
    相关资源
    最近更新 更多