html - 如何在下降一个高度时使两个div排成一行，向上一个自动变小

Question

我的代码:

<div>
    <div class='a'> </div>
    <footer></footer> 
</div>

一个:

position: absolute;
left: 0;
bottom: 0px;
height: 105px;
width: 100%;
margin: 0;
background: #f5f5f5;
border-top: solid 1px #afafb6;
z-index: 900;

页脚:

position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #F0EEEE;
white-space: nowrap;

是这样的:

-----|---------|
|   ||         |
| a ||         |
-----|         |
|   ||         |
|foo||         |
|ter||         |
-----|---------|

当页脚高度变大时，如何让div a的高度自动变小。

我想办法将页脚最大高度设置为 60%，然后设置为 40%，但是如果页脚发生变化，60% 会变得有点小

Answer 1

您可以使用 css 表格 来做到这一点。

FIDDLE 1 和 FIDDLE2

此外，您可以通过将内容包装在附加元素中并在该元素上设置 max-height 来为页脚添加 max-height。

FIDDLE 3 (一定要调整浏览器窗口的大小)

演示

* {
    margin:0;
    padding:0;
}
html, body {
    height:100%;
    width:100%;
    background: yellow;
}
.wpr {
    display:table;
    width: 100%;
    height: 100%;
}
.a, footer {
    width: 100%;
    background: yellow;
    display:table-row;
}
.a {
    background: pink;
    height:100%;
}
p {
    max-height: 40vh;
}

<div class="wpr">
    <div class='a'>a</div>
    <footer>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </footer>
</div>