html - div填充左边的空白高度

Question

我有这个样本:

link

代码 HTML:

    <div id="wrap">

      <div class="nav">
        <ul>
          <li>Link1</li>
          <li>Link2</li>
          <li>Link3</li>
          <li>Link4</li>
        </ul>
      </div>
      <div class="right">
        asdasdsa
      </div>

    </div>

    <footer>

    </footer>

代码 CSS:

   #wrap{
    float: none;
    height: auto;
    margin: 0 auto;
    min-height: calc(100vh - 348px);
}
.nav{
  float:left;
  display:inline-block;
  width:200px;
  height:100%;
  background:red;
}
.right{
  background:blue;
  width:calc(100% - 200px);
  float:left
}

footer{
  width:100%;
  height:50px;
  background:grey;
  position:absolute;
  bottom:0;
}

我想要做的是将左侧的 div 设置为页脚高度。

你能告诉我我的代码有什么问题吗？

Div(红色)基本上想成为页脚。我设法用 display: table 做到了这一点，但我想要另一个解决方案。

提前致谢!

Answer 1

这是更新的 fiddle .修改你的 .nav 代码如下

#wrap {
  float: none;
  height: auto;
  margin: 0 auto;
  min-height: calc(100vh - 348px);
}
.nav {
  float: left;
  display: inline-block;
  width: 200px;
  height: calc(100vh - 50px);
  background: red;
  position: absolute;
}
.right {
  background: blue;
  width: calc(100% - 200px);
  float: left
}
footer {
  width: 100%;
  height: 50px;
  background: grey;
  position: absolute;
  bottom: 0;
}

<div id="wrap">

  <div class="nav">
    <ul>
      <li>Link1</li>
      <li>Link2</li>
      <li>Link3</li>
      <li>Link4</li>
    </ul>
  </div>
  <div class="right">
    asdasdsa
  </div>

</div>

<footer>

</footer>