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

【问题标题】：2 container side by side one fixed one dynamic height2个容器并排一个固定一个动态高度
【发布时间】：2015-10-23 02:48:03
【问题描述】：

看看 jsFiddle：

https://jsfiddle.net/sg7u3exf/

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

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

因为一旦它太小，它会导致 div 超出视图字段。

我还喜欢将固定的 div 更改为在另一个之上，一旦窗口变小就不再固定了。

最好不需要 javascript。

我还希望动态高度 div 为主体创建高度，因为我有一个背景图像 div，它必须是页面的整个高度。

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

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

您可以将问题中的 CSS 部分替换为：

top: calc(50% - 100px);

这消除了您想要删除的负边距。

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

【讨论】：

嗯，这和以前有同样的问题，因为当窗口尺寸太小时，内容会超出视野。也许我会删除问题的最后一部分:-)

【解决方案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;    
}

嗨，伙计，您可以在将此 css 更改放入您的 jsfiddle 后检查

还有一件事，您需要至少将 top: 应用于相应的包装类，以使其看起来与您在演示 jsfiddle 中展示的完全一样，因此请使用更新的 jsfiddle 看看这里

是的，您可以根据需要将左侧和顶部设置为。

check Updated jsfiddle

【讨论】：

这两个 div 不居中
@LiKeLights 然后你可以调整 top: 的百分比值
但这永远不会使 div 仅在特定的屏幕宽度和高度居中。