css 頭部定高，底部佔滿以及相反操作

一、頭部定高，底部佔滿

在容器裡給乙個padding，top定在padding裡，bottom高度100%；

.wrpper{

height: 100%;

position: relative;

box-sizing: border-box;

padding-top: 0.9rem;

background: #fafafa;

.top {

box-sizing: border-box;

padding: .2rem .3rem;

height: .9rem;

position:absolute;

top: 0px;

left: 0px;

width: 100%;

.bottom{

height: 100%;

overflow: hidden;

padding: 0px;

margin: 0px;

還有一種方法，再wrap裡放乙個main，warp給width和height都是100%；

main也是width和height為100%；

然後main還有一些操作：

(1)main有乙個padding；架起header或者bottom；

(2)main給乙個相對定位：postion:relative

再加一些others給絕對定位

position:absolute

填充main裡padding給出的位置

table頭部 尾部固定 中間內容定高自適應滾動

table頭部 尾部固定 中間內容定高自適應滾動 很多時候，需要使用到 做資料分析，不管是前端展現，還是後台管理系統節點展現 工作過程中遇到了，作為乙個小筆記，備忘！如下圖所示 的頭部，和尾部是固定不動的，中間內容隨著內容的增多，而出現滾動條。序號姓名 性別年齡1張三 男18序號姓名 性別年1齡 如...

導航，頭部，CSS基礎

1.製作自己的導航條 2.html頭部元素 b.定義了html文件的樣式檔案 c.定義了乙個文件和外部資源之間的關係 3.練習樣式表 a.行內樣式表 b.內嵌樣式表 c.外部樣式表 4.分別練習定義三類選擇器 a.html 選擇器 b.class 類選擇器 c.id 選擇器 en height 20...

導航，頭部，CSS基礎

製作自己的導航條。定義了html文件的樣式檔案 定義了乙個文件和外部資源之間的關係 練習樣式表 行內樣式表 內嵌樣式表 外部樣式表 分別練習定義三類選擇器 html 選擇器 class 類選擇器 id 選擇器 en footer1 logo.png test name search submit 搜...