在所有分辨率中保持元素的高度相同

Question

我有三个元素，红色的元素是div，图像作为背景显示我的客户的徽标。白色的是＆＃34;模态＆＃34;单击菜单上的项目（未显示）时出现的窗口，此模态窗口使用百分比作为其高度，并使用固定位置保持在页面的中心（垂直和水平）。模态的底部与两个红色框对齐..对于我的分辨率，它工作得很完美，但在Macbook上（例如）在全屏时，网站看起来像这样

我应该怎么做才能解决这个问题？

如果有人需要它，这里是模态的CSS

   .modal{
    cursor: auto;
    position: absolute;
    z-index: 11;
    top: 45px;
    bottom: 15px;
    right: 0;
    left: 0;
    margin: auto;
    width: 940px;
    max-width: 1072px;
    height: 81%;
    padding: 40px;
    background-color: rgb(255, 255, 255);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #1C1C1C;
    text-align: left;
    overflow-y: auto;
    overflow-x: hidden;
   }

Answer 1

删除模式中的高度属性，您必须使用top和bottom来扩展模态。这将确保模态的底部距离屏幕底部15px。

  

模态的底部与两个红色框对齐..

使用top和bottom

为您的红色div添加相同的Css规则

  

此模态窗口使用百分比作为其高度，并使用固定位置保持在页面的中心（垂直和水平）

如果你说模态将垂直居中，那么你是否期望侧面的红色div在底部正确对齐？

为此你必须使用jquery，当模态为shown时，计算从窗口底部到模态底部的像素数，然后将这些像素作为CSS规则添加到两侧div的底层财产。那样你就会把它对齐