Question

我有三个div，当我调整高度时，我试图在页面上垂直对齐。一个在顶部对齐，一个在中间，一个在底部。当我调整页面时，底部总是在底部，顶部在顶部，而中间div保持在中间，它们之间的空间均匀，因此它们都保持可见。我需要使用媒体查询吗？这是我到目前为止的尝试。

<body>
    <div id="pageWrapper">
         <div id="top"></div>
         <div id="middle"></div>
         <div id="bottom"></div>
    </div>
</body>
#pageWrapper {
    width:100%;
    height:100%;
}
#top {
    width:200px;
    height:200px
}
#middle {
    margin-top:50%;
    width:200px;
    height:200px
}
#bottom {
    width:200px;
    height:200px
    position:absolute;
    bottom:0;
}

Answer 1

这是错误的做法。如果您确实需要此功能，我建议您使用display: table和display: table-row。不要忘记为height: 100%和html标记设置body以展开整个页面。然后为每个div设置display: table和#pageWrapper的{{1}}。

这是EXAMPLE它的工作原理。尝试调整框的大小以查看它的实际效果。

这是CSS：

display: table-row

Answer 2

如果支持较旧的浏览器不是一个大问题，您可以使用css's calc()

<强> Working Example

html, body {
    height:100%;
    width:100%;
}
#pageWrapper {
    width:100%;
    height:100%;
}
#top {
    width:200px;
    height:calc(100% / 3 - 10px);
    background: red;
}
#middle {
    width:200px;
    height:calc(100% / 3 - 10px);
    background: blue;
    margin-top: 15px;
    margin-bottom: 15px;
}
#bottom {
    width:200px;
    height:calc(100% / 3 - 10px);
    background: green;
}
p {
    position:relative;
    top:calc(50% - 10px);
}

如果您需要支持旧浏览器，并且不介意采用Rube Goldberg方法，则可以使用jQuery：

<强> Working Example

var rubeGoldberg = function () {
    $('#top, #middle, #bottom').height($('body').height() / 3 - $('body').height() * 0.02);
    $('#middle').css({
        marginTop: $(document).height() * 0.03,
        marginBottom: $(document).height() * 0.03
    });
    $('p').each(function () {
        $(this).css({
            top: $(this).parent().height() / 2 - $(this).height() / 2
        });
    });
};

$(function () {
    rubeGoldberg();
});

$(window).resize(function () {
    rubeGoldberg();
});

或者如果jQuery不是你真正的风味，那么Rube Goldberg的方法大致相同Vanilla JS

<强> Working Example

function rubeGoldberge() {
    var secElems = document.getElementsByClassName('sec');
    var mid = document.getElementById('middle');
    var paraElems = document.getElementsByTagName('p');
    for (var i = 0; i < secElems.length; i++) {
        secElems[i].style.height = window.innerHeight / 3 - window.innerHeight * 0.02 + 'px';
        mid.style.margin = window.innerHeight * 0.03 + 'px 0px';
        paraElems[i].style.top = (paraElems[i].parentNode.clientHeight / 2) - paraElems[i].clientHeight / 2 + 'px';
    }

    mid.style.margin = window.innerHeight * 0.03 + 'px 0px';
}

window.onload = rubeGoldberge();
window.addEventListener('resize', rubeGoldberge);

响应式布局问题div布局

2 个答案: