如何在不使用位置绝对/固定或flexbox的情况下垂直居中侧边栏(老派方式)

Question

我需要在不使用position: absolute或position: fixed的情况下垂直地集中侧边栏，也不使用任何css3功能，如flexbox和grid。我也可以只使用div,ul和li元素。我该怎么做呢?

另外，我如何将页脚定位在具有相同限制的页面底部?

这是我目前使用position: fixed的解决方案:https://jsfiddle.net/gx82v4uo/

.vertical-menu {
position: fixed;
top: 50%;
transform: translateY(-50%);
right: 0px;
}
.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;
}

Answer 1

您可以使用table。

我可能是这样做的(点击"完整页面"链接，看看侧边栏是如何垂直居中的，而不管屏幕高度):

html {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #ccc;
font-family: Arial;
height: 100%;
}
table {
height: 100%;
width: 100%;
border-collapse: collapse;
}
.minimum-height {
height: 0;
}
#main {
width: 100%;
}
.header ul {
padding: 0;
margin: 0;
text-align: center;
background: #2b3b75;
}
.header li {
display: inline-block;
color: #fff;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 15px;
font-weight: bold;
}
.header li:hover {
background: #3d53a3;
}
.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;
}
.vertical-menu li:hover {
background: #3d53a3;
}
.footer {
margin-bottom: 0px;
}
.footer ul {
padding: 0;
margin: 0;
text-align: center;
background: #424242;
}
.footer li {
display: inline-block;
color: #fff;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 15px;
font-weight: bold;
}
.footer li:hover {
background: #646464;
}

<table>
<tr class="minimum-height">
<td colspan="2">
<div class="header">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
<li>ITEM 5</li>
</ul>
</div>
</td>
</tr>
<tr>
<td id="main"></td>
<td>
<div class="vertical-menu">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
<li>ITEM 5</li>
</ul>
</div>
</td>
</tr>
<tr class="minimum-height">
<td colspan="2">
<div class="footer">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
<li>ITEM 5</li>
</ul>
</div>
</td>
</tr>
</table>

Answer 2

这是我能做的最好的帮助你。你需要改变你的样式，像

<style>
body {
margin: 0;
padding: 0;
background: #ccc;
font-family: Arial;
}
.header ul {
padding: 0;
margin: 0;
text-align: center;
background: #2b3b75;
}
.header li {
display: inline-block;
color: #fff;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 15px;
font-weight: bold;
}
.header li:hover {
background: #3d53a3;
}
.vertical-menu {
padding: 11.2% 0;
overflow: hidden;
}
.vertical-menu ul {
padding: 0;
margin: 0;
text-align: center;
background: #2b3b75;
width: fit-content;
float: right;
}
.vertical-menu li {
display: block;
color: #fff;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 15px;
font-weight: bold;
}
.vertical-menu li:hover {
background: #3d53a3;
}
.footer {
}
.footer ul {
padding: 0;
margin: 0;
text-align: center;
background: #424242;
}
.footer li {
display: inline-block;
color: #fff;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 15px;
font-weight: bold;
}
.footer li:hover {
background: #646464;
}
</style>

现在你需要改变.vertical-menupadding根据多个设备的大小，如果你需要。您可以使用media query。