html - 基于 CSS 的布局

Question

哦，基于表格的布局的黄金时代。难道我们不应该回到那里去搞砸语义吗？ (我知道，我知道，...)

但是我有一个棘手的网站布局，如果我使用表格，它可以在几秒钟内完成，代码行也很少。两天来，我一直在努力用 div 实现同样的目标。也许有人可以提供帮助。

这是我想要实现的布局: http://jsfiddle.net/reltek/13c6yfmh/

这是使用表格的代码，非常简单:

<table border="1" width="100%">    
  <tr>
    <th rowspan="2" width="30%" valign="top">            
      <h2>Main Navigation</h2>
      <p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p>
      <ul>
        <li>Nav 1</li>
        <li>Nav 2</li>
        <li>Nav 3</li>
      </ul>
    </th>
    <td valign="top">
      <h1>Main Content</h1>
      <p>Flexible, might get really long.</p>          
    </td>
  </tr>
  <tr>
    <td height="3em">      
      <h2>Footer</h2>
      <p>flexible height, should stay at the bottom of the page.</h2>
    </td>
  </tr>
</table>

我的基于 div 的 HTML 可以在这里找到:http://jsfiddle.net/reltek/48rmshen/

问题是:如果左列比右列长，则右侧的页脚不会停留在底部。

感谢任何帮助，谢谢大家!

Answer 1

这是 flexbox 的工作(旧浏览器的前缀和解决方法留给读者作为练习)

body {
    display: flex;
}
nav {
    background: red;
}
.non-nav {
    display: flex;
    flex-direction: column;
}
main {
    background: green;
    flex-grow: 1;
}
footer {
    background: blue;
    flex-shrink: 1;
}

<nav>
     <h2>Main Navigation</h2>

    <p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p>
    <ul>
        <li>Nav 1</li>
        <li>Nav 2</li>
        <li>Nav 3</li>
    </ul>
</nav>
<div class="non-nav">
    <main>
         <h1>Main Content</h1>

        <p>Flexible, might get really long.</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>end of text</p>
    </main>
    <footer>
         <h2>Footer</h2>

        <p>flexible height, should stay at the bottom of the page.</p>
        <ul>
            <li>Nav 1</li>
            <li>Nav 2</li>
            <li>Nav 3</li>
        </ul>
    </footer>
</div>