① HTML5怎麼把導航固定在底部是只滑動內容，導航固定不動的。
HTML5怎麼把導航固定在底部的步驟如下：
css的定位樣式屬性來實現；會用到css中的position：fixed;屬性，結合來實現。
<style>.foot-menu{width:100%;height:60px;background:#000;position:fixed;bottom:0;/**距離底部為0*/left:0;z-index:1;}</style><divclass="foot-menu">
<!---導航具體內容-->
</div>
拓展資料
css3網頁底部固定導航是一款純css3實現的網頁底部固定導航菜單。特性介紹：
1、邊框特性
CSS3對網頁中的邊框進行了一些改進，主要包括支持圓角邊框、多層邊框、邊框色彩與圖片等。在CSS3中最常用的一個改進就是圓角邊框，通過CSS3的屬性可以快速實現圓角定義，同時還可以根據實際情況針對特定角進行圓角定義 。
2、多背景圖
CSS3允許使用多個屬性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一個元素上添加多層背景圖片。
② 網站頁面底部應該怎麼固定
高度固定+絕對定位2.在主體content上的下邊距增加一個負值等於底部高度；方法三：將頁腳的margin-top設為負數；方法四： 通過設置flex，將footer的margin-top設置為auto；方法五： 通過函數calc()計算內容的高度；方法六： 通過設置flexbox，將主體main設置為flex。詳細可到三人行慕課上看教程
③ web怎麼做定位
在WEB中設置錨點定位我知道的有幾種方法
1、使用id定位：
復制代碼代碼如下:
<a href="#1F" name="1F">錨點1</a>
<div name="1F">
<p>
11111111111
</br>
11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>
</p>
</div>
這樣的定位可以針對任何標簽來定位。
2、使用name定位：
復制代碼代碼如下:
<a href="#5F">錨點5</a>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
<a name="5F">1111111</href>
使用name屬性只能針對a標簽來定位，而對div等其他標簽就不能起到定位作用。
3、使用js定位
復制代碼代碼如下:
<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>
④ 如何用CSS把層固定在整個網頁的最底部
打開一個編輯軟體設置一下css與div區域，使其固定在頁面的底部。
擴展：還有一種定位方式為：position:absolute如上例方式瀏覽器滑動的時候，它會隨著瀏覽器滾動條而滾動；而position:absolute則不會。
⑤ css 如何設置底部固定
要css 底部固定需要兩部分代碼：html代碼、css代碼
1、html代碼：
<body>
<div class='header'></div>
<div class='container'></div>
<div class='footer'></div>
</body>
2、css代碼：
.container{ padding-bottom:30px; /*需要 >= footer的height值*/}
.footer{ height:30px; position:fixed; bottom:0px; z-index:-1;}
(5)web底部固定定位擴展閱讀：
HTML代碼使用規范問題：
1、格式問題
在代碼視圖中編寫代碼，一定要規范的格式，不要把代碼全部都寫到一塊，這樣不僅影響效率，更加影響視覺，當出現問題的時候往往很難找到原因所在，比如，我在編寫HTML標簽的時候總是每個標簽都頂格寫，結果今天在實驗的時候，出現了錯誤，自己看著自己的代碼找問題都想著急，最後根據嵌套的層數找到了原因，缺少了結束標簽 導致的嚴重錯誤，所以謹記要把代碼格式寫規范；
2、布局問題：
在設計網頁時，應該首先構造好網頁的整個框架，然後對每個框架逐一進行完善，這樣當那個部分出現問題的時候，我們就可以單獨找到那個模塊進行修改，例如我們剛剛學到的div+css這一部分的時候，應該先創建一個總的容器，然後在容器中逐一添加登錄、導航、廣告展示、主要內容、版權信息等各個模塊，設置好各自的css樣式，然後 再進行進一步的細化。
在這樣的設計中，如果不先設計好總的結構，div的位置就會錯亂，那樣就不能很清晰地找到發生狀況的原因。
3、輸入問題：
一定要正確輸入標簽。輸入標簽時，不要輸入多餘的空格，否則瀏覽器可能無法識別這個標簽，導致無法正確地顯示信息。各種符號一定要在英文狀態下輸入，否則不會 顯示正確的效果。源代碼不區分大小寫。
4、屬性設置問題：
相應的標簽對應著自己的屬性，因為各個標簽對應的屬性實在是太多了，很容易混淆，如果我們想給某個標簽內的內容設置相應的屬性，我們必須在該標簽內找到相應的 屬性方法進行設置，比如將<table>的寬度設置為700、邊框寬度設置為1、單元格間距為0,相應的代碼設置是：<table width="700" border="1" cellspacing="0" >；
5、引用問題：
當我們在外部設置了css樣式，並且要引用這個樣式表時，我們必須要在<head></head>標簽內添加<link>標簽，如外部樣式表為style.css，那麼我們需要在head標簽中添加的是<link href="css/style.css" rel="stylesheet" type="text/css"/>,首先href是引入樣式的地址必不可少，rel定義了文檔與鏈接的關系，stylesheet是定義一個外部載入樣式表。
⑥ c# webbrowser 怎麼永久定位網頁底部
在網頁文檔載入完畢的事件中寫document.Window.ScrollTo(X, Y);即可
具體如下
private void webBrowser1_DocumentCompleted(object sender, e)
{
document.Window.ScrollTo(320, 300);//將文檔窗體滾動到指定位置，320表示橫坐標，300表示縱坐標，這都可以設置的。你可以測試一下，將其定位到網頁的底部
}
⑦ 如何將頁腳固定在頁面底部
作為一個Web的前端攻城師，在製作頁面效果時肯定有碰到下面這種現象：當一個HTML頁面中含有較少的內容時，Web頁面的「footer」部分隨著飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現在寬屏越來越多，這種現象更是常見。那麼如何將Web頁面的「footer」部分永遠固定在頁面的底部呢？
注意了這里所說的是頁腳footer永遠固定在頁面的底部，而不是永遠固定在顯示器屏幕的底部，換句話說，就是當內容只有一點點時，Web頁面顯示在瀏覽器底部，當內容高度超過瀏覽器高度時，Web頁面的footer部分在頁面的底部，總而言之Web頁面的footer部分永遠在頁面的底部，換句說，Footer部分永遠沉底。如下圖所示：
方法一:
首先我們來看第一種方法，這種方法是來自於Matthew James Taylor的《How to keep footers at the bottom of the page》。下面我們就一起來看看Matthew James Taylor介紹的方法。
HTML Markup
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
頁面容容部分
</div>
<div id="footer">Footer Section</div>
</div>
其實我們可以在div#page增加所需的內容結構，如下所示：
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left Sidebar</div>
<div id="content">Main content</div>
<div id="right">Right sidebar</div>
</div>
<div id="footer">Footer Section</div>
</div>
真正來說，實現這頁腳永遠固定在頁面的底部，我們只需要四個div，其中div#container是一個容器，在這個容器之中，我們包含了div#header（頭部），div#page（頁面主體部分，我們可以在這個div中增加更多的div結構，如上面的代碼所示），div#footer（頁腳部分）
CSS Code
html,body {
margin: 0;
padding:0; height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*IE6不識別min-height*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/*等於footer的高度*/
}
#footer {
position:
absolute;
bottom: 0;
width: 100%;
height: 60px;/*腳部的高度*/ background: #6cf;
clear:both;
}
/*=======主體內容部分=======*/
#left {
width: 220px;
float: left;
margin-right: 20px;
background: lime;
}
#content {
background: orange;
float: left;
width: 480px;
margin-right: 20px;
}
#right{
background: green;
float: right;
width: 220px;
}
下面我們一起來看看這種方法的實現原理：
1. <html>和<body>標簽：html和body標簽中必須將高度(height)設置為「100%」,這樣我們就可以在容器上設置百分比高度，同時需要將html,body的margin和padding都移除，也就是html,body的margin和padding都為0；
2. div#container容器：div#container容器必須設置一個最小高度(min-height)為100％；這主要使他在內容很少（或沒有內容）情況下，能保持100％的高度，不過在IE6是不支持min-height的，所以為了兼容IE6，我們需要對min-height做一定的兼容處理，具體可以看前面的代碼，或者閱讀Min-Height Fast Hack了解如何解決min-height在Ie6下的bug問題。另外我們還需要在div#container容器中設置一個」position:relative」以便於裡面的元素進行絕對定位後不會跑了div#container容器；
3.div#page容器：div#page這個容器有一個很關鍵的設置，需要在這個容器上設置一個padding-bottom值，而且這個值要等於（或略大於）頁腳div#footer的高度（height）值，當然你在div#page中可以使用border-bottom人水-width來替代padding-bottom，但有一點需要注意，此處你千萬不能使用margin-bottom來代替padding-bottom，不然會無法實現效果；
4. div#footer容器：div#footer容器必須設置一個固定高度，單位可以是px(或em)。div#footer還需要進行絕對定位，並且設置bottom:0；讓div#footer固定在容器div#container的底部，這樣就可以實現我們前面所說的效果，當內容只有一點時，div#footer固定在屏幕的底部（因為div#container設置了一個min-height:100%），當內容高度超過屏幕的高度，div#footer也固定在div#container底部，也就是固定在頁面的底部。你也可以給div#footer加設一個」width:100%」，讓他在整個頁面上得到延伸；
5. 其他div：至於其他容器可以根據自己需求進行設置，比如說前面的div#header,div#left,div#content,div#right等。
優點：
結構簡單清晰，無需js和任何hack能實現各瀏覽器下的兼容，並且也適應iphone。
缺點：
不足之處就是需要給div#footer容器設置一個固定高度，這個高度可以根據你的需求進行設置，其單位可以是px也可以是em，而且還需要將div#page容器的padding-bottom（或border-bottom-width）設置大小等於（或略大於）div#footer的高度，才能正常運行。
上面就是Matthew James Taylor介紹的如何實現頁腳永遠固定在頁面的底部，如果大家感興趣可以閱讀原文，也可以直接點擊這里查看Demo。
方法二：
這種方法是利用footer的margin-top負值來實現footer永遠固定在頁面的底部效果，下面我們具體看是如何實現的。
HTML Markup
1
2
3
4
<div id="container">
<div id="page">Main Content</div>
</div>
<div id="footer">footer</div>
上面的代碼是最基本的HTML Code，同時你也發現了div#footer和div#container是同輩關系，不像方法一，div#footer在div#container容器內部。當然你也可以根據你的需要把內容增加在div#container容器中，如：一個三列布局，而且還帶有header部分，請看下面的代碼：
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main content</div>
<div id="right">Right sidebar</div>
</div>
</div>
<div id="footer">Footer section</div>
CSS Code
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
}
#page {
padding-bottom: 60px;/*高度等於footer的高度*/
}
#footer {
position: relative;
margin-top: -60px;/*等於footer的高度*/
height: 60px;
clear:both;
background: #c6f;
}
/*==========其他div==========*/
#header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: orange;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: yellow;
}
方法一和方法二有幾點是完全相同的，比如說方法一中的1-3三點，在方法二中都一樣，換句話說，方法二中也需要把html,body高度設置為100%,並重置margin,padding為0；其二div#container也需要設置min-height:100%,並處理好IE6下的min-height兼容問題；其三也需要在div#page容器上設置一個padding-bottom或border-bottom-width值等於div#footer高度值（或略大於）。那麼兩種方法不同之處是：
1. div#footer放在div#container容器外面，也就是說兩者是同級關系，如果你有新元素需要放置在與div#container容器同級，那你需要將此元素進行絕對定位，不然將會破壞div#container容器的min-height值；
2. div#footer進行margin-top的負值設置，並且此值等於div#footer的高度值，而且也要和div#page容器的padding-bottom(或border-bottom-width)值相等。
優點：
結構簡單清晰，無需js和任何hack能實現各瀏覽器下的兼容。
缺點：
要給footer設置固定值，因此無法讓footer部分自適應高度。
大家要是對這種方法感興趣，你也可以瀏覽一下《CSS Sticky Footer》和《Pure Css Sticky Footer》，或者直接點擊Demo查看其源代碼。
方法三：
實現在頁腳永遠固定在頁面底部的方法有很多，但是有很多方法是需要使用一些hack或藉助javaScrip來實現，那麼接下來要說的方法三，僅僅使用了15行的樣式代碼和一個簡單明了的HTML結構實現了效果，並且兼容性強，別的不多說，先看代碼。
HTML Code
<div id="container">
<div id="page">Your Website content here.</div>
<div class="push"><!-- not have any content --></div>
</div>
<div id="footer">Footer Section</div>
上面是最基本的HTML Markup，當然你也可以加上新的內容，不過有一點需要注意如果你在div#container和div#footer容器外增加內容的話，新加進徠的元素需要進行絕對定位。如如說你可以在div#container容器中加上你頁面所需的元素
HTML Code
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<div id="right">Right Content</div>
</div> <div class="push"><!-- not put anything here -->
</div>
</div> <div id="footer">Footer Section</div>
CSS Code
html,
body{
height: 100%;
margin:0;
padding:0;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;/*margin-bottom的負值等於footer高度*/
} .push,
#footer {
height: 60px;
clear:both;
}
/*==========其他div效果==========*/
#header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: orange;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: yellow;
}
#footer {
background: #f6c;
}
跟前面兩種方法相比較，方法三更類似於方法二，他們都將div#footer放在div#container容器之外，而且這個方法在div#container容器中還增加了一個div.push用來把div#footer推下去，下面我們就一起看看這種方法是怎麼實現頁腳永遠固定在頁面底部的。
1. <html>和<body>標簽：html,body標簽和前兩種方法一樣，需要設置「height:100%」並重置「margin」和「padding」為0；
2. div#container:方法三關鍵部分就在於div#container的設置，首先需要設置其最小高度（min-height）為100％,為了能兼容好IE6，需要對min-height進行兼容處理（具體處理方法看前面或代碼）另外這里還有一個關鍵點在div#container容器上需要設置一個margin-bottom，並且給其取負值，而且值的大小等於div#footer和div.push的高度，如果div#footer和div.push設置了padding和border值，那麼div#container的margin-bottom負值需要加上div#footer和div.push的padding和border值。也就是說「div#container{margin-bottom:-[div#footer的height+padding+border]或者-[div.push的height+padding+border]}」。一句話來說：div#container的margin-bottom負值需要和div#footer以及div.push的高度一致（如果有padding或border時，高度值需要加上他們）；
3. div.push:在div.push中我們不應該放置任何內容，而且這個div必須放置在div#container容器中，而且是最底部，並且需要設置其高度值等於div#footer的值，最好加上clear:both來清除浮動。div.push容器在此處所起的作用就是將footer往下推。
4. div#footer容器：div#footer容器和方法二一樣，不能放到div#container內部，而和div#container容器同級，如果需要設置元素和footer之間的間距，最好使用padding來代替margin值。
優點：
簡單明了，易於理解，兼容所有瀏覽器。
缺點：
較之前面的兩種方法，多使用了一個div.push容器，同樣此方法限制了footer部分高度，無法達到自適應高度效果。
如果大家對方法三想了解更多可以點擊這里或者直接從DEMO中下載代碼自己研究一下。
方法四：
前面三種方法我們都不需要任何javaScript或jQuery的幫助，讓我們實現了頁腳永遠固定在頁面底部的效果，前面三種方法雖然沒有使用jQuery等幫助，但我們都額外增加了HTML標簽來實現效果。如果你省略了這些HTML標簽，再要實現效果就比較困難了，那麼此時使用jQuery或javaScript方法來幫助實現是一種很好的辦法，下面我們就一起來看第四種方法，通過jQuery來實現頁腳永遠固定在頁面底部的效果。
HTML Markup
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<div id="right">Right Content</div>
</div>
<div id="footer">Footer Section</div>
這里我們沒有增加沒用的HTML標簽，此時你也可以隨時在body中增加內容，只要確保div#footer是在body最後面。
<div id="footer">Footer Section</div>
CSS Code
*{margin: 0;padding:0;}
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1; /* IE <8 */
}
#footer{
height: 60px;
background: #fc6;
width: 100%;
}
/*==========其他div==========*/
#header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: orange;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: yellow;
}
這個方法不像前面三種方法靠CSS來實現效果，這里只需要按正常的樣式需求寫樣式，不過有一點需要特別注意在html,body中不可以設置高度height為100%，否則此方法無法正常運行，如果你在div#footer中設置了一個高度並把寬度設置為100%將更是萬無一失了。
jQuery Code
<script type="text/javascript">
// Window load event used just in case window height is dependant upon images
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $("#footer");
positionFooter();
//定義position Footer function
function positionFooter() {
//取到div#footer高度
footerHeight = $footer.height();
//div#footer離屏幕頂部的距離
footerTop = ( $(window).scrollTop()+$(window).height()-footerHeight)+"px";
/* DEBUGGING STUFF
console.log("Document height: ", $(document.body).height());
console.log("Window height: ", $(window).height());
console.log("Window scroll: ", $(window).scrollTop());
console.log("Footer height: ", footerHeight);
console.log("Footer top: ", footerTop); console.log("-----------")
*/
//如果頁面內容高度小於屏幕高度，div#footer將絕對定位到屏幕底部，否則div#footer保留它的正常靜態定位
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).stop().animate({
top: footerTop
});
} else {
$footer.css({
position: "static"
});
}
}
$(window).scroll(positionFooter).resize(positionFooter);
});
</script>
使用上面的jQuery代碼，可以輕松的幫我們實現頁腳永遠固定在頁面底部，使用這種方法有幾個地方需要注意
1. 確保正常引入了jQuery版本庫，並正常調入了上面那段jQuery代碼；
2. 確保<div id=」footer」>是在body中最後；
3. 確保在html,body中沒有設置高度為100%。
優點：
結構簡單，無需外加無用標簽，兼容所有瀏覽器，不用另外寫特別樣式。頁腳可以不固定高度。
⑧ web前端如何實現一個div固定在某個位置
在前端裡面，如何將一個div固定在某個位置，屬於css內position定位的內容。position定位屬性有五種類型，分別如下：
1.static 定位。html元素的默認值，即沒有定位，遵循正常的文檔流對象。靜態定位的元素不會受到 top, bottom, left, right影響。
2.fixed 定位。元素的位置相對於瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動。
3.relative 定位。相對定位元素的定位是相對其正常位置。
4.absolute 定位。絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於整個頁面。
5.sticky 定位。粘性定位是基於用戶的滾動位置來定位。它依賴於用戶的滾動，在position:relative與position:fixed定位之間切換。
⑨ 如何固定一個div在瀏覽器底部
1、首先新建一個html頁面，然後在這個html代碼頁面創建一個<div>標簽，同時給這個<div>添加一個class類為footer。
⑩ 網頁CSS定位問題 ，如何讓塊bottom始終位於頁面最下方了
不要使用絕對定位，這種功能局限性很強，絕對定位就是說不管什麼情況，被定位的塊都會在頁面的一個地方顯示，但是要讓某塊始終位於最下方，LZ已經考慮了它相對與其他塊的位置，所以我建議LZ使用相對位置，這是HTML編寫的習慣問題，也是頁面設計的第一步，要把所要安排的層按照從上到下從左到右的順序來寫，當你寫完所有的層以後，剩下的層自然就在最下面了，然後就可以設置相對位置和每個層的大小等具體屬性了，如有不懂可以再問。