Question

前段时间我继承了一个页面进行了一些调整，这些调整与许多手动定位和大小的元素一起被抛出，导致看起来粗糙的布局。我一段时间做了一些改变以清理（并使它在浏览器中看起来一致，这是请求的大部分）。这是JSfiddle that has more or less the result.

我已经决定让页面或多或少优雅地调整页面大小会好得多，因为此页面正在具有各种宽高比的环境中使用。我的目标是让下半部分固定高度，textarea扩展以填充空间，然后地图消耗垂直空间的剩余部分。我之前已经完成了这个，将页脚设置为％高度，内容为100％减去该数量，但我想在这里获得一个固定高度的页脚。我已经关注了几个看起来应该没有成功的样本。 Here's a modified JSfiddle where I'm currently at

我目前使用的最相关的CSS级别如下（请参阅jsfiddle以获取整页）：

html, body {
    height:100%;
    margin: 0;
}

#page {
    position:   relative;
    width:      100%;
    height:     100%;
    background: black;
    text-align: center;
}

#titleBar {
    display: table;
    width:100%;
    height: 60px;
    background:lightgray;
}

#mapWrapper {
    background:lightblue;

    position:relative;
    margin-bottom: 250px;

    /* need to specify some sort of height to get this to appear*/
    /* would be great if I could say "100% - 60px - 240px" */
    height:200px;
}

#entireBottomBar {
    position:absolute;
    bottom:0;
    left:0;
    height:auto;
    width:100%;
    margin-top: 0;
    margin-bottom: 0;
}

要清楚，如何使地图div扩展以填充页面的完整垂直高度，而不覆盖/位于页眉和/或页脚后面。

Answer 1

我能够通过几个步骤完成此任务：

将上面的两个div包裹在一个upperstuffdiv中
将uptuffdiv设置为大小border-box，底边框大小为页脚大小，并将box-sizing更改为border-box（因此100％高度会减去专用于页脚的空间）
以类似的方式，在uperstuffdiv中设置mapwrapper的顶部边框大小为标题（标题）
更改其大小调整大小，以便100％的大小可以纠正上方的“边框”
将标题div更改为position：fixed因为我无法使float或z-index以我预期的方式在地图的上边框上呈现它。

我仍然有兴趣听取替代方法或我方法的输入/输出。

在页眉和页脚之间调整div大小的问题

1 个答案: