2016-02-29 87 views
0

我有一個div盒,我已經定位在瀏覽器的右側,頂部邊框很好,但我需要底部的框底部140px的瀏覽器,我似乎無法得到這個工作。設置邊緣底部的div不工作

Ay的想法?

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

+0

您可能需要填充/保證金添加到容器此框。 140px的底部意味着它應該從底部開始爲140px,但是您有一個100%的頂部高度偏移120px的項目。我很好奇,如果你刪除頂部,底部顯示?我可能會嘗試確保它是塊元素並移除高度。 https://jsfiddle.net/sc06odhg/ – Brodie

+0

top:120px + height:100%and bottom:140px is covenrant。頂部和底部使其高度:100%; - (120px + 140px); !!?!! –

+0

盒子是否需要定位以絕對定位。如果沒有,我會建議把填充放在父母上,然後讓你的盒子100%w /盒子大小:邊框 – Brodie

回答

0

你的代碼是過度約束,因爲你topheightbottom指定明確的長度。

兩個約束就足夠了。不要指定height,讓它成爲默認的auto

#nav-right { 
 
    position: absolute; 
 
    top: 120px; 
 
    bottom: 140px; 
 
    right: 0; 
 
    width: 120px; 
 
    background: blue; 
 
}
<div id="nav-right"></div>

+0

我知道這將是簡單的。謝謝! –

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

它將最接近的父母集絕對,固定或相對位置設置底部價值,如果沒有家長定位,它需要HTML作爲參考。我認爲OP沒有給所有相關的信息都很有幫助。你的'修復'受到同樣的行爲,我相信 –