問題描述

我正在使用 css 和 html 設(shè)計(jì)一個(gè)網(wǎng)站.我已經(jīng)設(shè)法使用這個(gè) css 在我的頁面左側(cè)獲得一個(gè)導(dǎo)航欄，但是當(dāng)屏幕向下滾動(dòng)時(shí)，導(dǎo)航欄不再繼續(xù).

I am designing a website using css and html. I have managed to get a navigation bar on the left side of my page using this css, however when the screen is scrolled down the navigation bar no longer continues.

#navbar {
  background: #a8a599;
  float: left;
  width: 20%;
  height: 100%;
}

但是我想讓導(dǎo)航欄的高度成為文檔的高度.我覺得我可能需要 java 腳本，但是我是 java 腳本的新手，所以我不確定我將如何完成這個(gè).我認(rèn)為將高度設(shè)置為 100% 會(huì)使其占據(jù)整個(gè)頁面，因?yàn)樗徽紦?jù)頁面的可見部分.

However i would like to make the height of the navigation bar the height of the document. I feel like i might need java script for this, however i am new to java-script, so i am not sure how i would accomplish this. I thought making the height 100% would make it take up the whole page, owever it only takes up the visible part of the page.

如果您想查看頁面的其余部分，請點(diǎn)擊此處http://jsfiddle.net/HRpXV/3/embedded/result/p>

Here it is on fiddle if you want to look at the rest of the page http://jsfiddle.net/HRpXV/3/embedded/result/

推薦答案

100% 不適用，因?yàn)樗歉?dòng)的.將父容器改為position: relative，將導(dǎo)航欄改為position: absolute即可解決問題.

100% does not apply because it is floated. Change the parent container to position: relative and the navbar to position: absolute will solve the problem.

#container{
    position: relative;
}

#navbar {
    background: #a8a599;
    /*float: left; Instead of float, use absolute position*/
    position: absolute;
    width: 20%;
    height: 100%;
}

演示

這篇關(guān)于使導(dǎo)航欄在css中占據(jù)整個(gè)頁面高度的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！