设置边缘底部的div不工作

Question

我有一个div盒，我已经定位在浏览器的右侧，顶部边框很好，但我需要底部的框底部140px的浏览器，我似乎无法得到这个工作。

Ay的想法？

#nav-right { 
 
\t position: absolute; 
 
\t top:120px; 
 
\t bottom: 140px; 
 
\t right: 0; 
 
\t width: 120px; 
 
\t height: 100%; 
 
}

Answer 1

你的代码是过度约束，因为你top，height和bottom指定明确的长度。

两个约束就足够了。不要指定height，让它成为默认的auto。

#nav-right { 
 
    position: absolute; 
 
    top: 120px; 
 
    bottom: 140px; 
 
    right: 0; 
 
    width: 120px; 
 
    background: blue; 
 
}

<div id="nav-right"></div>

Answer 2

#nav-right { 
    position: absolute; 
    bottom: 140px; 
    right: 0; 
    width: 120px; 
    height: calc(100% - 120px - 140px); 
}