頁面兩列布局高度填滿

時間 2019-11-12

標籤頁面佈局高度填滿简体版

原文原文鏈接

問題來源

昨天早上某面試提出的一個問題，腦子一熱漏寫了一個條件，心塞。javascript

問題大概是寫一個兩列布局，左邊固定，高度都是默認填滿頁面，右邊內容高度超出瀏覽器窗口出現滾動條。css

解決辦法

今天仔細想了下，用浮動作的話，高度很差弄成填滿的。折騰了一下子，搞出兩種方案（不使用js的）。html

左側：fixed，右側：absolute，min-height:100%，width爲calc(100% - [左側的width])，同時margin-left也爲左側的width
html的overflow-x設置爲hidden，右側就能夠不用calc了，直接width: 100%，不過這樣的話，右側元素使用margin 0 auto居中就會向右邊偏移，偏移的長度爲左側的width

測試代碼：java

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>test layout</title>
  <style type="text/css"> *{ padding: 0; margin: 0; } /*html{ overflow-x:hidden; }*/ /*方法2*/ .left{ position: fixed; top: 0; left: 0; width: 100px; height: 100%; background-color: red; } .right{ position: absolute; width: calc(100% - 100px); /*方法1*/ /*width: 100%;*/ /*方法2*/ min-height: 100%; margin-left: 100px; background-color: blue; } .center{ width: 100px; background-color: yellow; margin: 0 auto; } </style>
  <script> window.onload = function(){ var addBtn = document.getElementsByClassName('js-add-btn')[0]; var delBtn = document.getElementsByClassName('js-del-btn')[0]; var right = document.getElementsByClassName('right')[0]; addBtn.onclick = function(e){ var pNode = document.createElement('p'); pNode.innerText = 'content'; for(var i = 0; i < 20; i++){ var cpNode = pNode.cloneNode(true); right.appendChild(cpNode); } } delBtn.onclick = function(e){ var children = right.children; var len = children.length; var delCount = len > 20 ? 20 : len; for(var i = 0; i < delCount; i++){ right.removeChild(children[len - (i + 1)]); } } } </script>
</head>
<body>
  <div class="left">
    <p>left</p>
    <button class="js-add-btn">增長右側內容</button>
    <button class="js-del-btn">刪除右側內容</button>
  </div>
  <div class="right">
    <div class="center">
      <p>centered content</p>
    </div>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
    <p>lots of content</p>
  </div>
</body>
</html>

jsfiddle： https://jsfiddle.net/g9j8mcf4/1/面試

相關標籤/搜索

每日一句

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