實(shí)現(xiàn)一個(gè)基本的
摘要:簡(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
摘要:簡(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);...
摘要:至于如何優(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è)...
摘要:最后感謝各位的觀看如果有什么意見(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...
閱讀 2522·2021-11-18 10:02
閱讀 1997·2021-11-09 09:45
閱讀 2441·2021-09-26 09:47
閱讀 1035·2021-07-23 10:26
閱讀 1077·2019-08-30 15:47
閱讀 3368·2019-08-30 15:44
閱讀 986·2019-08-30 15:43
閱讀 892·2019-08-29 13:50