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

weixin_34127717發表於2017-05-10

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

最終實現的效果如下：
clipboard.png
要求：上面的header固定不動，左面的選單和內容部分的高度到瀏覽器的底部，並且他們的內部可以滾動

寫這個demo需要考慮的幾個問題
1 如果不給html和body設樣式他們的高度是什麼樣的，結果發現他們是沒有高度的和普通div一樣。
所以應該把html和body的高度設定成100%

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

先寫出html結構：

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

相關文章