尽管flexbox现在已成为标准，并且大多数用户都有能力使用它，但我想要一个强大的老式，向后兼容的解决方案，使多个列具有相同的高度，其内容也是垂直的居中，不依赖于flexbox。这听起来很容易，但那些熟悉旧式HTML的人知道这不过是直截了当的。
答案 0 :(得分：0)
这是我分叉的codepen，代码由gitter.im用户@jdtdesigns创建：http://codepen.io/ihatecoding/pen/WwOyya
这是他写的html：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<h1 class="text-center">Header</h1>
</header>
<section class="main">
<div class="left">
<nav>
<h3>Menu</h3>
<a href="#">Home</a>
<a href="#">Contact</a>
<a href="#">About</a>
<a href="#">Support</a>
<a href="#">Home</a>
<a href="#">Contact</a>
<a href="#">About</a>
<a href="#">Support</a>
</nav>
</div>
<div class="center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nulla quibusdam adipisci, enim libero ducimus, et? Porro ex in temporibus. Temporibus expedita aliquam, doloribus, perspiciatis in tempora soluta repellendus voluptatum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et, quasi eligendi voluptatem praesentium repellendus! Cupiditate officia culpa placeat. Molestiae nulla laborum, est magni, cupiditate qui ullam eum aliquam consequuntur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste consequuntur ea accusantium nemo amet. Sint, suscipit assumenda eos, exercitationem perferendis adipisci numquam sunt, nesciunt repellendus fugit vel ut saepe eligendi.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi distinctio illo asperiores, deserunt vitae unde, sint perferendis fugit aliquid similique earum impedit eaque nobis quibusdam blanditiis dolore? Nemo, iusto, quia!</p>
</div>
<div class="right">
<div class="ad">
<h1>Ad</h1>
</div>
<div class="ad">
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
<h1>Ad</h1>
</div>
</div>
</section>
<footer>
<h1 class="text-center">Footer</h1>
</footer>
</body>
</html>
这是他写的css：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.text-center {
text-align: center;
}
.main {
display: table;
width: 100%;
}
.main > * {
display: table-cell;
vertical-align: middle;
}
.left, .right {
width: 20%;
background: #4385db;
text-align: center;
padding: 40px;
}
.center {
width: 60%;
padding: 20px;
}
header, footer {
background: #9842a5;
padding: 20px;
}
nav > * {
display: block;
}
a {margin:20px;}