底部div渲染后如何获得顶部div来填充剩余高度？ （没有flexbox） [英] How to get top div to fill remaining height after bottom div rendered? (without flexbox)

问题描述

在一个父容器内，三个div分别位于另一个之上。顶部div是固定高度。底部div的内容占用了未知数量的垂直空间，但需要显示其中的所有内容。顶部div应填充剩余的垂直空间。每个

 < div id =container> //可见窗口高度的100％，但不应该溢出
< div id =top> //固定高度
< / div> 
< div id =middle> //使用剩余的垂直空间
< / div> 
< div id =bottom> //未知高度，但内容应全部显示
< / div> 
< / div> 
  

我需要支持最新的ish旧版浏览器（例如IE9 +）&移动浏览器（例如Android 4.4+），所以基于flexbox的布局已经不存在了。我尝试使用Javascript（使用JQuery）来尝试设置

 中间div height =容器高度 - （顶部div高度+底部div高度）
  

但由于某些原因，浏览器在页面呈现期间误报了底部div高度（最新的Chrome在赢7）所以结果出错了。如果可能的话，我想尽量避免使用JS（如果解决方案正常运行，则开放）。

需要支持尽可能多的桌面和移动浏览器。
Thanks

解决方案

对于旧浏览器，其中 flex 不能使用时， display：table 可以回落，但布局将能够越过窗口的高度，而内容太长而无法显示一次。

CSS仅使用 flex 和表作为不支持 flex 的后备： https://codepen.io/gc-nomade/pen/BdWXpp

下面的代码片段是 display：table code> / table-row 仅限CSS（几乎适用于所有浏览器 （IE8和下一个）



html，body，＃container {height：100％; width：100 ％; margin：0; display：tabl e; background：turquoise;}＃container> div {display：table-row;}。buffer {display：table-cell; / *显示是可选项，但HTML中需要元素以将布局保留为单列并允许垂直对齐内容* / vertical-align：middle; text-align：center;}＃top {background：orange; height：100px;}＃middle {height：100％;}＃bottom {background：tomato;}

 < div id =container> < div id =top> < div class =buffer> top 100px，测试我的完整页面和任何媒体< / div> < / DIV> < div id =middle> < div class =buffer>使用剩余的垂直空间< / div> < / DIV> < div id =bottom> < div class =buffer>未知高度< br />适合< br />内容以容纳< / div> < / div>< / div>  

Three divs each above the other, within a parent container. Top div is fixed height. Bottom div has content that takes up an unknown amount of vertical space but needs all content within it to display. Top div should fill remaining vertical space. Every

<div id="container"> // 100% of visible window height but should not overflow
   <div id="top"> // Fixed height
   </div>
   <div id="middle"> // Use remaining vertical space
   </div>
   <div id="bottom"> // Unknown height but contents should all be shown
   </div>
</div>

I need to support recent-ish legacy browsers (e.g. IE9+) & mobile browsers (e.g. Android 4.4+), so flexbox based layouts are out. I tried Javascript (using JQuery) to try and set

middle div height = container height - (top div height + bottom div height)

but for some reason the browser was mis-reporting the bottom div height during page render (latest Chrome on Win 7) so result came out wrong. And I'd like to avoid JS if possible (tho am open if a solution works).

Need to support as many desktop and mobile browsers as possible. Thanks

解决方案

For old browser , where flex cannot be used , display:tablecan be a fall back but layout will be able to grow past window's height where content is too long to be shown at once.

A CSS only mix using flex and table as a fallback where flex is not supported: https://codepen.io/gc-nomade/pen/BdWXpp

Below, snippet with display:table/table-row CSS only (which works for almost any browser (IE8 and next)

html,
body,
#container {
  height: 100%;
  width: 100%;
  margin: 0;
  display: table;
  background: turquoise;
}

#container>div {
  display: table-row;
}

.buffer {
  display: table-cell;
  /* display is optionnal but element is required in HTML to keep layout as a single column and allow vertical-align to content*/
  vertical-align: middle;
  text-align: center;
}

#top {
  background: orange;
  height: 100px;
}

#middle {
  height: 100%;
}

#bottom {
  background: tomato;
}

<div id="container">
  <div id="top">
    <div class="buffer">top 100px, test me full page and in any medias
    </div>
  </div>
  <div id="middle">
    <div class="buffer">Use remaining vertical space
    </div>
  </div>
  <div id="bottom">
    <div class="buffer">Unknown height<br/> that fits <br/>to content to hold
    </div>
  </div>
</div>

这篇关于底部div渲染后如何获得顶部div来填充剩余高度？ （没有flexbox）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！