具有固定页眉、页脚和可滚动内容的响应式网格布局 [英] Responsive grid layout with fixed header, footer and scrollable content

查看：19
本文介绍了具有固定页眉、页脚和可滚动内容的响应式网格布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 flexbox 创建 2 列全高设计.当我将滚动添加到整个中间部分时，我有一个奇怪的行为.如果父容器有滚动条，flex-grow/stretch 似乎不会增长/拉伸其他项目.

这是我的

解决方案

为了使这个布局在最新的 Firefox &Chorme 截至今天(从 2016 年开始修改此答案)，我进行了以下更改:

  1. 向 body 添加 margin: 0 以允许 container 弯曲到视口高度.

  2. 将 #content 元素上的内容包装在另一个 section 中，并使其成为 column flexbox.

  3. 使内部 section 成为一个全高的 flexbox 并给 min-height: max-content 和 flex: 1.

见下面的演示:

html,身体 {高度:100%；边距:0；/* 添加 */}#容器 {显示:弹性；弹性方向:列；高度:100%；宽度:50%；背景颜色:红色；}#容器头{背景颜色:灰色；}#容器>部分 {/* 添加 >选择器 */显示:弹性；/* 添加 */弹性方向:列；/* 添加 */弹性:1 1 自动；溢出-y:自动；最小高度:0px；}#容器>部分 >部分{/* 添加 */显示:弹性；高度:100%；最小高度:最大内容；/* 修复铬 */弹性:1；/* 修复火狐 */}#容器页脚{背景颜色:灰色；}在旁边 {宽度:100px；背景颜色:蓝色；最小高度:内容；}文章 {宽度:100%；显示:弹性；弹性方向:列；}文章>div {弹性:1 1 自动；}

<header id="header">这是一个标题</header><section id="内容"><部分><旁边>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/></一边><文章id="文章"><div>这是内容<br/>有很多线.<br/>有很多线.<br/>这是内容<br/>有很多线.<br/><br/>这是内容<br/>有很多线.<br/><br/>这是内容<br/>有很多线.<br/>

<footer id="footer">这是一个页脚</footer></文章></节></节><footer id="footer">这是一个页脚</footer></section>

上述解决方案充其量是hacky，并且向我们展示了为什么 flexbox 在 2D 布局中弱.答案是它不是为它设计的.但是 CSS 网格 是 - 看看一切是多么容易:

  1. 使 #container 成为一个完整的视口高度 grid 元素.

  2. 使 middle section 成为带有 grid-template-columns: 100px 1fr 的 grid 容器连同 overflow 属性，你就快完成了.

见下面的演示:

body {边距:0；}#容器 {显示:网格；宽度:50%；高度:100vh；背景颜色:红色；}页眉页脚 {背景颜色:灰色；}#容器部分{显示:网格；网格模板列:100px 1fr；溢出-y:自动；}在旁边 {背景颜色:蓝色；}文章 {显示:弹性；弹性方向:列；}文章 >div {弹性:1 1 自动；}

<header id="header">这是一个标题</header><section id="内容"><旁边>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/></一边><文章id="文章"><div>这是内容<br/>有很多线.<br/>有很多线.<br/>这是内容<br/>有很多线.<br/><br/>这是内容<br/>有很多线.<br/><br/>这是内容<br/>有很多线.<br/>

<footer id="footer">这是一个页脚</footer></文章></节><footer id="footer">这是一个页脚</footer></section>

I'm trying to create 2 column full height design by using flexbox. When I add scrolling to whole middle part then I have a strange behavior. It seems that flex-grow/stretch doesn't grow/stretch other items if parent container has a scrollbar.

Here is my fiddle. Code also given below:

html, body {
    height: 100%;    
}
#container {
    display: flex;
    flex-direction: column;
    height: 100%;
    
    width: 50%;
    background-color: red;
}

#container header {
    background-color: gray;
}
#container section {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}
#container footer {
    background-color: gray;
}
aside {
  width : 100px;
  background-color: blue;
}
article{
  width: 100%;
  display:flex;
  flex-direction: column;
}
article > div{
  flex: 1 1 auto;
}

#content {
  display:flex;   
}

<section id="container" >
<header id="header" >This is a header</header>
<section id="content">
  <aside>
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
  </aside>
  <article id="article" >
    <div>               
      This is the content that
      <br />
      With a lot of lines.
      <br />
      With a lot of lines.
      <br />
      This is the content that
      <br />
      With a lot of lines.
      <br />
      <br />
      This is the content that
      <br />
      With a lot of lines.
      <br />
      <br />
      This is the content that
      <br />
      With a lot of lines.
      <br />
    </div>
    <footer id="footer" >This is a page footer</footer>      
  </article>
</section>
<footer id="footer" >This is a footer</footer>
</section>

Basically i'm trying to cover 2 scenarios. It works fine if i don't need to scroll but once i have a scroll the items doesn't stretch correctly:

解决方案

To make this layout work in latest Firefox & Chorme as of today (revising this answer from 2016), I made the following changes:

  1. Added margin: 0 to body to allow the container to flex to the viewport height.

  2. Wrap you the contents on #content element in another section and make it a column flexbox.

  3. Make the inner sectiona full-height flexbox and give min-height: max-content and flex: 1.

See demo below:

html,
body {
  height: 100%;
  margin: 0; /* ADDED */
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  background-color: red;
}

#container header {
  background-color: gray;
}

#container > section { /* ADDED > selector */
  display: flex; /* ADDED */
  flex-direction: column; /* ADDED */
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0px;
}

#container > section > section{ /* ADDED */
  display: flex;
  height: 100%;
  min-height: max-content; /* fixes chrome */
  flex: 1; /* fixes firefox */
}

#container footer {
  background-color: gray;
}

aside {
  width: 100px;
  background-color: blue;
  min-height: content;
}

article {
  width: 100%;
  display: flex;
  flex-direction: column;
}

article>div {
  flex: 1 1 auto;
}

<section id="container">
  <header id="header">This is a header</header>
  <section id="content">
    <section>
      <aside>
        test<br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br />
      </aside>
      <article id="article">
        <div>
          This is the content that
          <br /> With a lot of lines.
          <br /> With a lot of lines.
          <br /> This is the content that
          <br /> With a lot of lines.
          <br />
          <br /> This is the content that
          <br /> With a lot of lines.
          <br />
          <br /> This is the content that
          <br /> With a lot of lines.
          <br />
        </div>
        <footer id="footer">This is a page footer</footer>
      </article>
    </section>
  </section>
  <footer id="footer">This is a footer</footer>
</section>

The above solution is hacky at best and shows us why a flexbox is weak in 2D layouts. The answer is it is just not designed for it. But CSS Grids are - see how easily everything falls into place:

  1. Make #container a full viewport high grid element.

  2. Make the middle section a grid container with grid-template-columns: 100px 1fr along with overflow property and you are almost done.

See demo below:

body {
  margin: 0;
}

#container {
  display: grid;
  width: 50%;
  height: 100vh;
  background-color: red;
}

header, footer {
  background-color: gray;
}

#container section {
  display: grid;
  grid-template-columns: 100px 1fr;
  overflow-y: auto;
}

aside {
  background-color: blue;
}

article {
  display: flex;
  flex-direction: column;
}

article > div {
  flex: 1 1 auto;
}

<section id="container">
  <header id="header">This is a header</header>
  <section id="content">
    <aside>
      test<br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br /> test
      <br />
    </aside>
    <article id="article">
      <div>
        This is the content that
        <br /> With a lot of lines.
        <br /> With a lot of lines.
        <br /> This is the content that
        <br /> With a lot of lines.
        <br />
        <br /> This is the content that
        <br /> With a lot of lines.
        <br />
        <br /> This is the content that
        <br /> With a lot of lines.
        <br />
      </div>
      <footer id="footer">This is a page footer</footer>
    </article>
  </section>
  <footer id="footer">This is a footer</footer>
</section>

这篇关于具有固定页眉、页脚和可滚动内容的响应式网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆