欢迎光临
我们一直在努力

css布局上下高度固定中间自适应,且内容超出高度时出现滚轴

本篇文章记得一下css 布局上下固定高度  中间自适应高度   且内容 超出高度时出现滚轴

这里用的flex布局的方案实现布局

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>css flex 上下固定中间自适应例子</title>
  <style>
    body {padding: 0;margin: 0;}
    #boxs {
      width: 90%;
      height: 300px;
      border: 1px solid #333;
      display: flex;
      flex-direction: column
    }
    .dheight {
      height: 50px;
      min-height: 50px;
    }
    .center {
      flex: 1;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div id="boxs">
    <div class="dheight" style="background-color:#ffc5c5;">上边固定宽度</div>
    <div class="center" style="background-color:#b9f;">
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
      中间自适应高度超出有滚轴<br>
    </div>
    <div class="dheight" style="background-color:#7171f7;">下边固定宽度</div>
  </div>
</body>
</html>
赞(0)
未经允许不得转载:自游互动 » css布局上下高度固定中间自适应,且内容超出高度时出现滚轴
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们