不使用绝对/固定定位、flexbox的传统方法实现侧边栏垂直居中及页脚置底

一、侧边栏垂直居中实现 #

实现原理 #

采用CSS2.1规范支持的table+table-cell布局实现垂直居中，完全符合限制要求。

代码实现 #

HTML结构

<div class="page-wrapper">
  <div class="main-content">
    <!-- 页面主内容区域 -->
  </div>
  <div class="menu-wrapper">
    <div class="vertical-menu">
      <ul>
        <li>菜单项1</li>
        <li>菜单项2</li>
        <li>菜单项3</li>
      </ul>
    </div>
  </div>
</div>

CSS样式

/* 基础重置 */
html, body {
  height: 100%;
  margin: 0;
}
.page-wrapper {
  display: table;
  width: 100%;
  height: 100%;
}
.main-content {
  display: table-cell;
  /* 主内容自适应占满剩余宽度 */
}
.menu-wrapper {
  display: table-cell;
  vertical-align: middle;
  width: 100px; /* 匹配侧边栏宽度 */
}
/* 原有菜单样式保留，删除position相关代码即可 */
.vertical-menu ul {
  padding: 0;
  margin: 0;
  text-align: center;
  background: #2b3b75;
}
.vertical-menu li {
  display: block;
  color: #fff;
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  font-weight: bold;
}

二、页脚固定在页面底部实现 #

实现原理 #

同样采用table+table-row布局，将整个页面作为table容器，分为头部、内容、页脚三个table行，内容行设置高度为100%自动占满剩余空间，即可实现内容不足时页脚沉底，内容溢出时页脚跟随内容滚动的效果。

代码实现 #

HTML结构

<div class="page-container">
  <div class="page-header">
    <!-- 头部内容，可省略 -->
  </div>
  <div class="page-content">
    <!-- 页面主体内容 -->
  </div>
  <div class="page-footer">
    <!-- 页脚内容 -->
  </div>
</div>

CSS样式

html, body {
  height: 100%;
  margin: 0;
}
.page-container {
  display: table;
  width: 100%;
  height: 100%;
}
.page-header, .page-content, .page-footer {
  display: table-row;
}
.page-content {
  height: 100%;
}
/* 自定义页脚样式 */
.page-footer {
  height: 60px;
  line-height: 60px;
  background: #f5f5f5;
}

内容的提问来源于stack exchange，提问作者vturkovic