Question

看看jsFiddle：

我希望这些div完全像这样但没有这部分

top: 50%;
margin-top: -100px;

因为一旦它太小，它会导致div退出视野。

我还希望将固定的div更改为另一个，并且一旦窗口较小就不再修复。

充其量不需要javascript。

我也喜欢动态高度div来为身体创造高度，因为我有一个背景图像div，它必须是页面的整个高度。

修改：毕竟我找到了一个带有媒体查询的解决方案：https://jsfiddle.net/sg7u3exf/6/

Answer 1

您可以使用以下代码替换问题中的CSS部分：

top: calc(50% - 100px);

摆脱了你想要移除的负边缘。

我不确定这对你有什么帮助。（Here's the modified fiddle）

Answer 2

.wrapper {
    text-align: center;
    position:absolute;
    top:50%;
    left:50%
}
.leftFixed {
    display: inline-block;
    width: 100px;
    height: 200px;
    background-color: red;
    
    /* just to demonstrate */
    position: fixed;    
    margin-left: -55px;
}
.rightDynamicScrolled {
    display: inline-block;
    width: 100px;
    background-color: green;
    
    /* just to demonstrate */
    position: relative;
    margin-left: 55px;    
}

Hii老兄你可以在把这个css变化放到你的jsfiddle

之后检查

并且你需要将至少 top：应用到相应的包装类，看起来就像你在demo jsfiddle中显示的那样，所以看看这里有更新的jsfiddle

并且有一件事是你可以根据需要设置左侧和顶部。

check Updated jsfiddle

2个容器并排固定一个动态高度

2 个答案: