Question

我正在尝试创建一个看起来像这样的布局：

如果页眉和页脚固定在窗口上，则蓝色区域在需要空间时垂直滚动。

我认为<header class="header"> <div class="header_wrap"> <div class="logo"> <a href="">ABC</a> </div> <span class="nav-btn"></span> </div> <ul class="nav-list"> <a href="#"><li>A</li></a> <a href="#"><li>B</li></a> <a href="#"><li>C</li></a> </ul> </header>会这样做，下面的代码会关闭，但是有问题。如果您滚动该内容区域，它看起来像这样：

似乎“左侧导航”和“内容”的div被切割为其父级的高度，即使该父级是可滚动的。

display:flex

var linesToAdd = 100;
var html = "";
for (var i=0; i<linesToAdd; i++) {
   html += i + "<br/>"
}
document.getElementById('content').innerHTML = html;

html {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height:100%
}
#header, #footer {
  background: #ffa0a0;
  flex-shrink:0;
}
#mid {
  flex-grow: 1;
  background: #a08080;
  overflow-y: scroll;
  display: flex;
}
#leftnav {
  padding: 10px;
  background: #8a8;
}
#content {
  background: #88a;
  padding: 10px;
}

现在，我可以稍微修改它以使其在内容溢出时起作用，但是当内容较小时它不起作用。当内容很小的时候，我正在寻找一种垂直延伸到页脚的东西，但是当内容很大时，溢出而不会切断背景。

<!doctype html>
<html>
<body>
  <div id="header">Header</div>
       
  <div id='mid'>
    <div id='leftnav'>Left nav</div>
    <div id='content'></div>
  </div>
  <div id="footer">Footer</div>
</body>
</html>

// With 100 here it looks good, but with 5, you see it doesn't stretch vertically.
var linesToAdd = 5;
var html = "";
for (var i=0; i<linesToAdd; i++) {
   html += i + "<br/>"
}
document.getElementById('content').innerHTML = html;

html {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height:100%
}
#header, #footer {
  background: #ffa0a0;
  flex-shrink:0;
}
#mid {
  flex-grow:1;
  background:#a88;
  overflow-y:scroll;
}
#leftnav {
  padding: 10px;
  background: #8a8;
}
#content {
  background: #88a;
  padding: 10px;
}

Answer 1

您还需要在HTML上设置height。

faux columns方法可以为您提供帮助：（方法使用渐变重新访问，但多个背景也可以使用）

<html>
<style>
  html {
    height: 100%;
  }
  * {
    box-sizing: border-box;
  }
  body {
    margin: 0;
  }
  .headorfoot {
    background: #ffa0a0;
    flex-shrink: 0;
  }
</style>

<body style="display:flex;flex-direction:column;height:100%">

  <div class="headorfoot">
    Header
  </div>

  <div id='mid' style="flex-grow:1;background:linear-gradient(to right,#80A080 200px,gray 200px , gray 203px, #8080A0 203px);;overflow-y:scroll;  display:flex">
    <!-- <div style="display:flex"> -->
    <div style="padding: 10px;width:200px;">Left nav</div>
    <div style="width:3px;"></div>
    <div style="padding: 10px;background:#8080a0;flex:1">
      <script>
        for (var i = 0; i < 100; i++) {
          document.write(i + "<br/>");
        }
      </script>
    </div>
    <!-- </div> -->
  </div>
  <div class="headorfoot">
    Footer
  </div>
</body>

</html>

您可能还想使用：position:sticky用于左侧导航，（如果您觉得有用，则存在polyfill）

html,
body {
  margin: 0;
  height: 100%
}
.headorfoot {
  background: #ffa0a0;
}
body {
  display: flex;
  flex-direction: column;
}
#mid {
  background: #8080a0;;
  display: flex;
  flex: 1;
  overflow: auto;
}
.scroll {
  flex:1;
  border-left:solid gray;
  
}
.nav {
  position:sticky;
  top:0;
}

/* demo purpose */
.scroll:hover br {
  float:left;
  display:none;/* where float doesn't work ... demo purpose only */
}

<div class="headorfoot">
  Header
</div>

<div id='mid'>

  <div class="nav" style="padding: 10px;background:#80a080">Left nav</div>
  <div class="scroll" style="padding: 10px;background:#8080a0;">
    <script>
      for (var i = 0; i < 100; i++) {
        document.write(i + "<br/>");
      }
    </script>
  </div>
</div>
<div class="headorfoot">
  Footer
</div>

HTML弹性框布局 - 滚动元素不会拉伸

1 个答案: