html - 在所有分辨率下保持元素的相同高度

Question

我有三个元素，红色的是 div，以图像为背景，显示我客户的 Logo 。白色的是一个“模态”窗口，当你点击菜单上的一个元素时出现(不显示)，这个模态窗口使用百分比作为它的高度，并使用一个固定的位置保持在页面的中心(垂直和水平) ).模态的底部与两个红色框对齐。对于我的解决方案，它工作完美，但在 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 拉伸(stretch)模态。这将确保模态框的底部距屏幕底部 15 像素。

The bottom of the modal as to be aligned with the two red boxes..

使用 top 和 bottom 将相同的 Css 规则添加到您的红色 div

this modal window uses percentages for its height and uses a fixed position to stay in the center of the page (both vertically and horizontally)

如果您说模态框甚至垂直居中，那么您如何期望侧面的红色 div 在底部正确对齐？

为此，您必须使用 jquery，并且每当 显示 模态时，计算从窗口底部到模态底部的像素数，然后将此像素作为 CSS 规则添加到两侧 div 的底部属性。这样你就可以对齐了