html - 侧面导航全高100％

This question already has answers here:

Equalize the height of left and right div, prevent right div from going below left div
                                
                                    （2个答案）
                                
                        
                                6年前关闭。
            
                    
我正在尝试使侧面导航成为容器的全部高度。

目前是这样设置的

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设置高度，因为它需要根据其中的内容量而变化。

最佳答案

我不确定这是否是您想要的。这样可以照顾到周围的填充物，使其达到全高，我在chrome，fire fox和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>

关于html - 侧面导航全高100％，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21294868/