造型在HTML頁面

這裏固定側欄是我想要的HTML代碼：造型在HTML頁面

HTML

<div id="top-bar"><nav>...</nav></div> 
<div id="page-area"> 
    <div id="side-bar"></div> 
    <div id="content"></div> 
</div>

「頂吧」具有60像素的所有畫面的固定高度。我想要正確設置其餘的高度以使其響應。如何讓「側欄」佔據頁面整個高度，並在導航欄頂部保留60px的頂部？

請分享佈局... – Santhoshkumar

[靜態/固定側欄和流體含量（HTTPS的可能重複：// stackoverflow.com/questions/25945202/static-fixed-sidebar-and-fluid-content） –

在CSS3可以指定calc爲您的規則值。

因此，假如沒有什麼別的你的頁面上，你可以這樣做：

#page-area { 
    height: calc(100vh - 60px); 
}

2017-07-25 07:26:23 ne1410s

這個完美的作品！ :) –

-1

您可以添加

body {padding-top:60px}

2017-07-25 07:26:11 user3083618

爲什麼downvote？有一個固定的酒吧，如果身體沒有填充，內容會落在酒吧後面。 – user3083618

我不知道爲什麼這次被拒絕投票，我沒有試過這個，因爲@ ne1410s的解決方案對我來說非常合適。但是，我想這個會有填充頂部。 –

由於缺乏解釋，我預計它會被降票。 SO不僅是爲了援助，而是爲了教學。爲什麼OP的細節不起作用，以及爲什麼你可能會爲社區增加價值給出理由。 –

回答