這裏固定側欄是我想要的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的頂部?
這裏固定側欄是我想要的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的頂部?
在CSS3可以指定calc
爲您的規則值。
因此,假如沒有什麼別的你的頁面上,你可以這樣做:
#page-area {
height: calc(100vh - 60px);
}
這個完美的作品! :) –
您可以添加
body {padding-top:60px}
爲什麼downvote?有一個固定的酒吧,如果身體沒有填充,內容會落在酒吧後面。 – user3083618
我不知道爲什麼這次被拒絕投票,我沒有試過這個,因爲@ ne1410s的解決方案對我來說非常合適。但是,我想這個會有填充頂部。 –
由於缺乏解釋,我預計它會被降票。 SO不僅是爲了援助,而是爲了教學。爲什麼OP的細節不起作用,以及爲什麼你可能會爲社區增加價值給出理由。 –
請分享佈局... – Santhoshkumar
[靜態/固定側欄和流體含量(HTTPS的可能重複:// stackoverflow.com/questions/25945202/static-fixed-sidebar-and-fluid-content) –