Question

我有一个内容在中心的模态。但是在顶部我有一个固定的标题，在滚动内容时保持不动。问题是当内容增长（css上的高度设置为150％）时，滚动条（mac os用户请启用滚动条）将内容分解为左侧，另一方面标题保持在相同位置。

我怎样才能让内容不分手？

HTML：

<div class="modal">
    <div class="content">
        <div class="header">Some title</div>
        <div class="text">
            Some text
        </div>
    </div>
</div>

CSS：

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body{
    background-color: black;
}

.modal{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 9;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.5);
}

.content{
    width: 60%;
    position: relative;
    margin: auto;
    z-index: 4;
    height: 150%;
    background-color: white;
}

.header{
    width: 60%;
    background-color: black;
    height: 50px;
    position: fixed;
}

.text{
    padding: 80px 30px;
}

的jsfiddle：

http://jsfiddle.net/Ncpds/5/

更新

我注意到如果模态变为absolute而不是fixed，则滚动条不会影响固定元素。有人知道为什么会这样吗？

Jsfiddle：

http://jsfiddle.net/qUXdG/

为什么带有position: fixed的模态的滚动条表现不同？

谢谢！

Answer 1

好的......所以 - 我很难知道你想要什么...但我认为你的小.click功能是在滚动条出现时显示页面宽度的变化。我认为你只需要放一个

overflow-y: scroll;

你的html或正文上的

...这将确保总有一个滚动条，以便没有跳跃。

然而......我认为真正的问题就是你对整个事情的看法。如果我更了解你的目标，我可以帮助你。 - 但尝试溢出的想法。

当内容溢出时，避免使用内部固定元素的模态向左“浮动”

1 个答案: