天學(xué)會html+css，第九天固定定位。

Redmi手機(jī)電視筆記本。

今天的學(xué)習(xí)目標(biāo)是右側(cè)懸浮工具欄用固定定位實(shí)現(xiàn)，它是相對于瀏覽器窗口的定位方式。

·盒子里的內(nèi)容用a標(biāo)簽，一個(gè)圖片加一行文字，此時(shí)它的位置在最底部。

·然后給它寫上固定定位樣式，右側(cè)距離0，下面距離70像素，加上背景顏色，看下效果。

·開始給a標(biāo)簽寫樣式，固定寬高，text-renderin默認(rèn)下劃線去掉，里面內(nèi)容居中，看下效果。

·圖片寫樣式之前也要加上這行代碼，然后讓它的尺寸變小一點(diǎn)，并且左右居中，看下效果。

·文字的顏色、大小也調(diào)整一下。

·最后給a標(biāo)簽加上邊框、內(nèi)邊距，讓里面內(nèi)容往下挪一挪。

到此，今天的學(xué)習(xí)完成。

在我們制作html網(wǎng)頁的時(shí)候，有時(shí)候需要某個(gè)元素（比如說div）的滾動條一直在最下方，那么我們該怎么做呢？

先上代碼：

window.onload = SetScroll;// 不要括號

function SetScroll(){

//讀取需要設(shè)定的元素高度

var height=$("#showwindows")[0].scrollHeight;

//設(shè)置元素的滾動條位置在高度數(shù)據(jù)地方就是最下方

$("#showwindows").scrollTop(height);

}

程序執(zhí)行流程如下：

1、頁面加載時(shí)自動調(diào)用JavaScript中的SetScroll方法；

2、設(shè)置height為需要設(shè)置滾動條元素的高度；

3、設(shè)置元素的滾動條位置為元素高度，就是元素的最下方位置。

為教程，還是先科（啰）普（嗦）一下，然后再進(jìn)入正題。

calc函數(shù)能夠干什么

CSS3 的 calc() 函數(shù)允許我們在屬性值中執(zhí)行數(shù)學(xué)計(jì)算操作，它支持"+", "-", "*", "/" 運(yùn)算，遵循標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級規(guī)則。例如，我們可以使用 calc() 指定一個(gè)元素的寬度總是比它的父元素寬度小 50px。

.foo {
  width: calc(100% - 50px);
}

這意味著瀏覽器中的值可以更加靈活，能夠響應(yīng)視口的改變，用在流體布局上簡直就是如虎添翼。calc是英文單詞calculate(計(jì)算)的縮寫，是css3的一個(gè)新增的功能。

特別需要注意的是：運(yùn)算符前后都需要保留一個(gè)空格，例如：width: calc(100% - 10px)；

哪些瀏覽器可以使用

可以說，calc函數(shù)已經(jīng)得到了瀏覽器廠商的普遍支持，如下圖所示。

對于不支持 calc() 的瀏覽器，整個(gè)屬性值表達(dá)式將被忽略。不過我們可以對那些不支持 calc()函數(shù)的瀏覽器，使用一個(gè)固定值作為回退。

.foo {
    width: 90%; /* Fallback for older browsers */
    width: calc(100% - 50px);
}

回到正題：如何實(shí)現(xiàn)一個(gè)div高度固定，一個(gè)div鋪滿剩余屏幕

需求：比如，我們經(jīng)常需要固定一個(gè)操作面板在頁面底部，其它區(qū)域占滿屏幕剩余區(qū)域并隨視口變化而自適應(yīng)變化，且可以上下滾動。

分析：我們能夠給要固定的元素設(shè)定一個(gè)高度，其值為視口的高度減去一個(gè)絕對值。那么我們可以做一個(gè)上下結(jié)構(gòu)的布局，上部為主區(qū)域，下部為底部區(qū)域。

HTML代碼：

<div id="main">主區(qū)域</div>
<div id="bottom">底部區(qū)域</div>

CSS代碼：

body {
  margin: 0;
  color: white;
  text-align: center;
}
#main {
  height: calc(100vh - 50px); /*視口高度 - 50px*/
  overflow-y: auto;
  background-color: blueviolet;
}
#bottom {
  height: 50px;
  background-color: black;
}

效果如下：無論窗口多大，底部始終保持50px高度，其余部分會隨著窗口變化而自適應(yīng)變化，當(dāng)主區(qū)域內(nèi)容很多時(shí)，該區(qū)域會出現(xiàn)滾動條。

【本文結(jié)束】

學(xué)習(xí)過程記錄，有需要的朋友可以參考。歡迎一鍵三連（點(diǎn)贊、關(guān)注、評論）。