使用 DIV 而不是表格重新设计 UI答案

【问题标题】：Redesign UI using DIV and not tables使用 DIV 而不是表格重新设计 UI
【发布时间】：2018-11-20 05:40:33
【问题描述】：

我目前正在尝试将以下布局从表格转换为 div。它具有以下特点：

100% 的宽度和高度（相对于浏览器窗口大小）
上半部分占 100% 的 80%，下半部分占 20%
文本溢出时顶部会在 y 方向滚动，固定标题不会随滚动而移动，但下方的文本 (lorem ipsum...) 会在其下方移动
底部根本不滚动

如何在 DIV 而不是表格中完成此操作？

<table width="100%" height="100%" id="container">
  <tr>
    <td height="85%" id="top"><div id="chat" style="height: 100%; overflow: scroll-y">
        <h2>Innovation Week 2013 - Virtual Idea Wall</h2>
      </div></td>
  </tr>
  <tr>
    <td height="10%" id="bottom"><form id="send-message">
        <p>
          <label for="title">Please give your idea a title</label>
          <br />
          <input type="text" id="title" name="title"/>
        </p>
        <p>
          <label for="message">Please provide details of your idea</label>
          <br>
          <input type="text" id="message" name="message"/>
        </p>
        <p>
          <input type="submit">
        </p>
        </input>
      </form></td>
  </tr>
</table>

【问题讨论】：

标签： html css html-table

【解决方案1】：

看看这个小提琴：

定义高度、固定位置和溢出行为。

http://jsfiddle.net/63bjC/1/

CSS：

#main {
    width: 100%;
    height: 80%;
    min-height: 80%;
    max-height: 80%;
    position: fixed;
    overflow: scroll;
}

#footer {
    width: 100%;
    height: 20%;
    min-height: 20%;
    max-height: 20%;
    position: fixed;
    bottom: 0;
    background-color: orange;
}

标记：

<div id="main">content</div>
<div id="footer">fixed at bottom</div>

【讨论】：