實(shí)現(xiàn)一個(gè)基本的
資訊專欄INFORMATION COLUMN
摘要：簡單搭建后臺管理系統(tǒng)布局最終實(shí)現(xiàn)的效果如下要求上面的固定不動(dòng)，左面的菜單和內(nèi)容部分的高度到瀏覽器的底部，并且他們的內(nèi)部可以滾動(dòng)寫這個(gè)需要考慮的幾個(gè)問題如果不給和設(shè)樣式他們的高度是什么樣的，結(jié)果發(fā)現(xiàn)他們是沒有高度的和普通一樣。
簡單搭建后臺管理系統(tǒng)布局
最終實(shí)現(xiàn)的效果如下：
要求：上面的header固定不動(dòng)，左面的菜單和內(nèi)容部分的高度到瀏覽器的底部，并且他們的內(nèi)部可以滾動(dòng)
寫這個(gè)demo需要考慮的幾個(gè)問題
1 如果不給html和body設(shè)樣式他們的高度是什么樣的，結(jié)果發(fā)現(xiàn)他們是沒有高度的和普通div一樣。
所以應(yīng)該把html和body的高度設(shè)置成100%
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
先寫出html結(jié)構(gòu)：
實(shí)現(xiàn)一個(gè)基本的
2 開始的時(shí)候我沒有把header設(shè)置成fixed，但是出現(xià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加上原來的height。我們想要的效果是main總的高度不變，padding-top+新的高度 = 原來的body高度。
所以這里又用到了css3中的box-sizing，設(shè)置成border-sizing。
3 然后就是簡單的左面固定和右面自適應(yīng)的布局，把他們的overflow設(shè)置成scroll。
具體的實(shí)現(xiàn)代碼參見：https://github.com/yylgit/nod...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/50767.html
摘要：簡單搭建后臺管理系統(tǒng)布局最終實(shí)現(xiàn)的效果如下要求上面的固定不動(dòng)，左面的菜單和內(nèi)容部分的高度到瀏覽器的底部，并且他們的內(nèi)部可以滾動(dòng)寫這個(gè)需要考慮的幾個(gè)問題如果不給和設(shè)樣式他們的高度是什么樣的，結(jié)果發(fā)現(xiàn)他們是沒有高度的和普通一樣。 簡單搭建后臺管理系統(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è)接口測試工具，接口文檔管理就是其中一個(gè)。 首先放個(gè)線上地址大家感受一下(由于后端用的是 leancloud 的免費(fèi)套餐，因此可能會(huì)比較慢)： vue-data-board P.S. 建議大家盡量自己注冊一個(gè)賬號(可以隨便填一個(gè)密碼)，如果用默認(rèn)的測...
摘要：最后感謝各位的觀看如果有什么意見或者建議的話還望多多指教感謝如果感覺我的博客還過得去的話還請給個(gè)鼓勵(lì)一下作者嘿嘿。 一直以來都想用自己的技術(shù)做一些個(gè)人項(xiàng)目, 之前的博客是基于 hexo 搭建, 感覺啥都是別人幫你寫好了, 于是便決定自己搞一個(gè), 斷斷續(xù)續(xù)地弄了一段時(shí)間, 也總算是完成了個(gè)簡單版本并部署上線. 博客線上地址 博客地址：cykspace 博客后臺：cykspace-node...
閱讀 3556·2021-11-18 10:07
閱讀 1651·2021-11-04 16:08
閱讀 1600·2021-11-02 14:43
閱讀 1158·2021-10-09 09:59
閱讀 935·2021-09-08 10:43
閱讀 1202·2021-09-07 09:59
閱讀 1047·2019-12-27 11:56
閱讀 1163·2019-08-30 15:56
