成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

簡(jiǎn)單搭建后臺(tái)管理系統(tǒng)布局

Simon_Zhou / 2589人閱讀

摘要:簡(jiǎn)單搭建后臺(tái)管理系統(tǒng)布局最終實(shí)現(xiàn)的效果如下要求上面的固定不動(dòng),左面的菜單和內(nèi)容部分的高度到瀏覽器的底部,并且他們的內(nèi)部可以滾動(dòng)寫(xiě)這個(gè)需要考慮的幾個(gè)問(wèn)題如果不給和設(shè)樣式他們的高度是什么樣的,結(jié)果發(fā)現(xiàn)他們是沒(méi)有高度的和普通一樣。

簡(jiǎn)單搭建后臺(tái)管理系統(tǒng)布局

最終實(shí)現(xiàn)的效果如下:

要求:上面的header固定不動(dòng),左面的菜單和內(nèi)容部分的高度到瀏覽器的底部,并且他們的內(nèi)部可以滾動(dòng)

寫(xiě)這個(gè)demo需要考慮的幾個(gè)問(wèn)題
1 如果不給html和body設(shè)樣式他們的高度是什么樣的,結(jié)果發(fā)現(xiàn)他們是沒(méi)有高度的和普通div一樣。
所以應(yīng)該把html和body的高度設(shè)置成100%

html,body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

先寫(xiě)出html結(jié)構(gòu):


  

實(shí)現(xiàn)一個(gè)基本的

2 開(kāi)始的時(shí)候我沒(méi)有把header設(shè)置成fixed,但是出現(xiàn)的問(wèn)題是,我需要讓main高度自適應(yīng),所以需要把height設(shè)置成100%,但是那樣的話main和body的高度相同,所以main+header的高度就大于body的高度,就會(huì)出現(xiàn)body的滾動(dòng)條。所以想到的解決辦法是讓header設(shè)成fixed,固定高度80px,main的高度和body相同,所以main的上面有80px是被header覆蓋的,所以可以給main加上80px的padding-top,如果直接加,你會(huì)發(fā)現(xiàn)main的高度就變成了80px加上原來(lái)的height。我們想要的效果是main總的高度不變,padding-top+新的高度 = 原來(lái)的body高度。
所以這里又用到了css3中的box-sizing,設(shè)置成border-sizing。
3 然后就是簡(jiǎn)單的左面固定和右面自適應(yīng)的布局,把他們的overflow設(shè)置成scroll。
具體的實(shí)現(xiàn)代碼參見(jiàn):https://github.com/yylgit/nod...

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/112006.html

相關(guān)文章

  • 簡(jiǎn)單搭建后臺(tái)管理系統(tǒng)布局

    摘要:簡(jiǎn)單搭建后臺(tái)管理系統(tǒng)布局最終實(shí)現(xiàn)的效果如下要求上面的固定不動(dòng),左面的菜單和內(nèi)容部分的高度到瀏覽器的底部,并且他們的內(nèi)部可以滾動(dòng)寫(xiě)這個(gè)需要考慮的幾個(gè)問(wèn)題如果不給和設(shè)樣式他們的高度是什么樣的,結(jié)果發(fā)現(xiàn)他們是沒(méi)有高度的和普通一樣。 簡(jiǎn)單搭建后臺(tái)管理系統(tǒng)布局 最終實(shí)現(xiàn)的效果如下:showImg(https://segmentfault.com/img/bVNsjn?w=2810&h=780);...

    NotFound 評(píng)論0 收藏0
  • 觀眾老爺們,來(lái)試試這個(gè)用 Vue 擼的數(shù)據(jù)可視化后臺(tái)

    摘要:至于如何優(yōu)雅地管理使用,再次祭出潘神的文章手摸手,帶你優(yōu)雅的使用掘金項(xiàng)目的后端接口文檔我是用的進(jìn)行的管理,其實(shí)有很多強(qiáng)大的功能,不僅僅是一個(gè)接口測(cè)試工具,接口文檔管理就是其中一個(gè)。 首先放個(gè)線上地址大家感受一下(由于后端用的是 leancloud 的免費(fèi)套餐,因此可能會(huì)比較慢): vue-data-board P.S. 建議大家盡量自己注冊(cè)一個(gè)賬號(hào)(可以隨便填一個(gè)密碼),如果用默認(rèn)的測(cè)...

    JinB 評(píng)論0 收藏0
  • 分享一下我的 vue + koa + mysql 搭建博客之旅

    摘要:最后感謝各位的觀看如果有什么意見(jiàn)或者建議的話還望多多指教感謝如果感覺(jué)我的博客還過(guò)得去的話還請(qǐng)給個(gè)鼓勵(lì)一下作者嘿嘿。 一直以來(lái)都想用自己的技術(shù)做一些個(gè)人項(xiàng)目, 之前的博客是基于 hexo 搭建, 感覺(jué)啥都是別人幫你寫(xiě)好了, 于是便決定自己搞一個(gè), 斷斷續(xù)續(xù)地弄了一段時(shí)間, 也總算是完成了個(gè)簡(jiǎn)單版本并部署上線. 博客線上地址 博客地址:cykspace 博客后臺(tái):cykspace-node...

    cnTomato 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<