實現一個基本的
資訊專欄INFORMATION COLUMN
摘要：簡單搭建后臺管理系統布局最終實現的效果如下要求上面的固定不動，左面的菜單和內容部分的高度到瀏覽器的底部，并且他們的內部可以滾動寫這個需要考慮的幾個問題如果不給和設樣式他們的高度是什么樣的，結果發現他們是沒有高度的和普通一樣。
簡單搭建后臺管理系統布局
最終實現的效果如下：
要求：上面的header固定不動，左面的菜單和內容部分的高度到瀏覽器的底部，并且他們的內部可以滾動
寫這個demo需要考慮的幾個問題
1 如果不給html和body設樣式他們的高度是什么樣的，結果發現他們是沒有高度的和普通div一樣。
所以應該把html和body的高度設置成100%
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
先寫出html結構：
實現一個基本的
2 開始的時候我沒有把header設置成fixed，但是出現的問題是，我需要讓main高度自適應，所以需要把height設置成100%，但是那樣的話main和body的高度相同，所以main+header的高度就大于body的高度，就會出現body的滾動條。所以想到的解決辦法是讓header設成fixed，固定高度80px,main的高度和body相同，所以main的上面有80px是被header覆蓋的，所以可以給main加上80px的padding-top，如果直接加，你會發現main的高度就變成了80px加上原來的height。我們想要的效果是main總的高度不變，padding-top+新的高度 = 原來的body高度。
所以這里又用到了css3中的box-sizing，設置成border-sizing。
3 然后就是簡單的左面固定和右面自適應的布局，把他們的overflow設置成scroll。
具體的實現代碼參見：https://github.com/yylgit/nod...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112006.html
摘要：簡單搭建后臺管理系統布局最終實現的效果如下要求上面的固定不動，左面的菜單和內容部分的高度到瀏覽器的底部，并且他們的內部可以滾動寫這個需要考慮的幾個問題如果不給和設樣式他們的高度是什么樣的，結果發現他們是沒有高度的和普通一樣。 簡單搭建后臺管理系統布局 最終實現的效果如下：showImg(https://segmentfault.com/img/bVNsjn?w=2810&h=780);...
摘要：至于如何優雅地管理使用，再次祭出潘神的文章手摸手，帶你優雅的使用掘金項目的后端接口文檔我是用的進行的管理，其實有很多強大的功能，不僅僅是一個接口測試工具，接口文檔管理就是其中一個。 首先放個線上地址大家感受一下(由于后端用的是 leancloud 的免費套餐，因此可能會比較慢)： vue-data-board P.S. 建議大家盡量自己注冊一個賬號(可以隨便填一個密碼)，如果用默認的測...
摘要：最后感謝各位的觀看如果有什么意見或者建議的話還望多多指教感謝如果感覺我的博客還過得去的話還請給個鼓勵一下作者嘿嘿。 一直以來都想用自己的技術做一些個人項目, 之前的博客是基于 hexo 搭建, 感覺啥都是別人幫你寫好了, 于是便決定自己搞一個, 斷斷續續地弄了一段時間, 也總算是完成了個簡單版本并部署上線. 博客線上地址 博客地址：cykspace 博客后臺：cykspace-node...
閱讀 2515·2021-11-18 10:02
閱讀 1984·2021-11-09 09:45
閱讀 2426·2021-09-26 09:47
閱讀 1024·2021-07-23 10:26
閱讀 1068·2019-08-30 15:47
閱讀 3361·2019-08-30 15:44
閱讀 968·2019-08-30 15:43
閱讀 887·2019-08-29 13:50
