Question

我试图将侧导航系统设为容器的全高度。

这就是目前的设置方式

HTML：

<div class="contentPage">
    <div class="nine columns"></div>
    <div class="three columns sideNav"></div>
</div>

CSS：

.contentPage{
  background: white;
  padding: 20px 20px;
  width: 960px;
}  

.nine{
  width:75%;
}

.three{
  width:25%;
}

.sideNav{
  top: -20px;
  left: 12px;
  background-color: #eee;
  height: 100%;
  margin-bottom: -40px;
  padding-bottom: 40px;
}

这不会使sideNav达到全高，但我也不想设置我的contentPage的高度，因为它需要根据内容的数量而变化。

Answer 1

我不确定这是否是你要找的。这会照顾你的衬垫，所以它是全高的，我在铬，火狐和ie11上进行了测试。

<style>
.contentPage{
    background: white;
    width: 960px;
}

.nine{
    width:75%;
}

.three{
    width:25%;
}

.sideNav{
    top: -20px;
    left: 12px;
    background-color: #eee;
    height: 100%;
    margin-bottom: -40px;
    padding-bottom: 40px;

}</style>

<div class="contentPage">
    <div class="nine columns">
    </div>

    <div class="three columns sideNav">
    </div>
</div>

侧导航全高100％

1 个答案: