簡單搭建後臺管理系統佈局

時間 2019-11-08

標籤簡單搭建後臺管理系統佈局简体版

原文原文鏈接

簡單搭建後臺管理系統佈局

最終實現的效果以下：

要求：上面的header固定不動，左面的菜單和內容部分的高度到瀏覽器的底部，而且他們的內部能夠滾動css

寫這個demo須要考慮的幾個問題
1 若是不給html和body設樣式他們的高度是什麼樣的，結果發現他們是沒有高度的和普通div同樣。
因此應該把html和body的高度設置成100%html

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

先寫出html結構：node

<body>
  <div class="header">
  </div>
  <div class="main">
    <div class="sider">
      <ul id="menu">
      </ul>
    </div>
    <div class="container">
        <div class="content">
          <p>實現一個基本的</p>
        </div>
    </div>
  </div>
</body>

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...css3

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。