CSS同时设置绝对定位top和bottom属性

问题引出

最近在用html+css+js做一个web后台管理系统左边侧边栏时出现了父元素定义为绝对定位时脱标，导致子元素无法撑开父元素高度的问题。

但是希望实现如下效果，左边导航栏将剩余全部位置占满，即使上面只有4个下面也可以占满

代码如下：
index.html

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Index</title><link rel="stylesheet" type="text/css" href="./css/index.css">
</head><body><div id="root"><div id="header"></div><div id="main"><div class="main-left"><ul><li class="nav">增</li><li class="nav">删</li><li class="nav">改</li><li class="nav">查</li></ul></div><div class="main-right"></div></div></div>
</body></html>

index.css（我是用less生成的css，其实一样，方便初学者）

* {margin: 0;padding: 0;
}body {background-color: #424a61;
}#header {height: 49px;background-color: #202329;
}#main {position: relative;
}.main-left {float: left;position: absolute;width: 180px;background-color: #d9dee4;
}.main-left .nav {display: block;width: 180px;height: 60px;background-color: pink;
}

解决问题步骤

为了将下面填充完，于是我第一时间想到将父盒子（class=“main-left”）设置高度，但我的高度该设置多少好呢？我希望它能够兼容不同的浏览器、显示屏分辨率，所以肯定不能写死高度。

然后就开启了我漫漫探索之路（其实是自己踩坑了），请大家记住类名，接下来以类名来讲解！

方法1：设置main-left的高度height（固定值300px）

代码如下

.main-left {float: left;position: absolute;width: 180px;height: 300px;background-color: #fff;background-color: #d9dee4;
}

效果图（灰色为多出来的）

但是这里的缺陷是：高度不是动态变化的，而是写死的，如果遇到不同屏幕分辨率的电脑就会有问题。

方法2：设置main-left的top和bottom均为0

为了不写死main-left的高度，通过以前的经验，外加查找资料，发现有设置绝对定位元素的top和bottom为0这种方法来拉长元素，于是我马上开始设置，发现还是有问题存在。
代码如下

.main-left {float: left;position: absolute;width: 180px;top: 0;bottom: 0;background-color: #fff;background-color: #d9dee4;
}

效果图如下：

发现原来的问题还存在，无法拉长元素。**经过我自己的排查，最后发现是我布局的问题！前面埋下的坑（经典子绝父相），导致了main-left的绝对定位是以main为准，而main的高度是由子元素撑开的，此时main的高度也为0（main-left脱标，main-right未设置宽高），于是我在这里绕来绕去，最后发现是这里的问题！！！**找出问题后，马上进行修改，将main内的position:relative删去，再给margin-left的top一个值（因为此时绝对定位相对于浏览器来进行定位）即可完成效果。
完整代码如下：
index.html

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Index</title><link rel="stylesheet" type="text/css" href="./css/index.css">
</head><body><div id="root"><div id="header"></div><div id="main"><div class="main-left"><ul><li class="nav">增</li><li class="nav">删</li><li class="nav">改</li><li class="nav">查</li></ul></div><div class="main-right"></div></div></div>
</body></html>

index.css

* {margin: 0;padding: 0;
}body {background-color: #424a61;
}#header {height: 49px;background-color: #202329;
}.main-left {float: left;position: absolute;width: 180px;top: 49px;bottom: 0px;background-color: #d9dee4;
}.main-left .nav {display: block;width: 180px;height: 60px;background-color: pink;
}

最终效果图：

至此，问题解决！