哦,基于表格的布局的黄金时代。难道我们不应该回到那里去搞砸语义吗? (我知道,我知道,...)
但是我有一个棘手的网站布局,如果我使用表格,它可以在几秒钟内完成,代码行也很少。两天来,我一直在努力用 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/
问题是:如果左列比右列长,则右侧的页脚不会停留在底部。
感谢任何帮助,谢谢大家!
最佳答案
这是 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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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>
关于html - 基于 CSS 的布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28852311/