Question

我有这个样本：

代码HTML：

UITableview

CODE CSS：

    <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>

我想要做的是左侧的div以使其达到页脚高度。

请告诉我我的代码有什么问题？

Div（红色）基本上想要达到页脚。我设法用

   #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;
}

做到了这一点，但我想要另一个解决方案。

提前致谢！

2 个答案:

答案 0 :(得分：1)

答案 1 :(得分：0)

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>

Answer 2

这是解决方案

<强> Demo

CSS：

html, body {
  height:100%;
  margin: 0;
  padding:0;
}
#wrap{
    float: none;
    height: calc(100vh - 50px);
    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填补左侧空间的空白高度

2 个答案: