如何在flexbox中创建可滚动的内容部分？

时间：2015-11-03 17:12:50

标签： css layout flexbox

好的，所以我想要一个简单的（或者我认为）布局，其中应用程序有一个页眉和一个页脚＆＃34;卡住＆＃34;分别在窗口的顶部和底部，中间有内容。没关系，我可以做到这一点。

接下来，我希望内容本身具有页眉和页脚，内部内容部分填充剩余空间，如果溢出，则可滚动。

我已经创建了一个关于我到目前为止所做的事情的模型，显示了我的问题：

＆＃13;
＆＃13; 
.application-body {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
}

.application-header {
  background-color: #FFDDFF;
  -webkit-flex: 0 0 45px;
  -moz-flex: 0 0 45px;
  -ms-flex: 0 0 45px;
  flex: 0 0 45px;
}

.application-content {
  background-color: #DDFFFF;
  -webkit-flex: 1 1;
  -moz-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
  padding-left: 15px;
  padding-right: 15px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.application-footer {
   background-color: #FFFFDD;
  -webkit-flex: 0 0 45px;
  -moz-flex: 0 0 45px;
  -ms-flex: 0 0 45px;
  flex: 0 0 45px;
}

.content-header {
   background-color: #FFFF22;
  -webkit-flex: 0 0 25px;
  -moz-flex: 0 0 25px;
  -ms-flex: 0 0 25px;
  flex: 0 0 25px;
}

.content {
  background-color: #22FFFF;
  -webkit-flex: 0 0 100%;
  -moz-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}

.content-footer {
   background-color: #FF22FF;
  -webkit-flex: 0 0 25px;
  -moz-flex: 0 0 25px;
  -ms-flex: 0 0 25px;
  flex: 0 0 25px;
}
＆＃13; 
<div class="application-body">
    <div class="application-header">
      APP HEADER
    </div>
    <div class="application-content">
      <div class="content-header">
        CONTENT HEADER
      </div>
      <div class="content">
        CONTENT
        <ul>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Aliquam tincidunt mauris eu risus.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
        </ul>  
      </div>
      <div class="content-footer">
        CONTENT FOOTER
      </div>
    </div>
    <div class="application-footer">
      © All rights reserved by TEST Ltd. 2015
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：4)

我想你想要

.application-content, .content {
  overflow: auto; /* Enable scrollbars if necessary */
  flex: 1 1;      /* Fill available space (don't use 100%) */
}


.application-body {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
}

.application-header {
  background-color: #FFDDFF;
  -webkit-flex: 0 0 45px;
  -moz-flex: 0 0 45px;
  -ms-flex: 0 0 45px;
  flex: 0 0 45px;
}

.application-content {
  background-color: #DDFFFF;
  -webkit-flex: 1 1;
  -moz-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
  padding-left: 15px;
  padding-right: 15px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.application-footer {
   background-color: #FFFFDD;
  -webkit-flex: 0 0 45px;
  -moz-flex: 0 0 45px;
  -ms-flex: 0 0 45px;
  flex: 0 0 45px;
}

.content-header {
   background-color: #FFFF22;
  -webkit-flex: 0 0 25px;
  -moz-flex: 0 0 25px;
  -ms-flex: 0 0 25px;
  flex: 0 0 25px;
}

.content {
  background-color: #22FFFF;
  -webkit-flex: 0 0 100%;
  -moz-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}
.content-footer {
   background-color: #FF22FF;
  -webkit-flex: 0 0 25px;
  -moz-flex: 0 0 25px;
  -ms-flex: 0 0 25px;
  flex: 0 0 25px;
}
.application-content, .content {
  overflow: auto;
  flex: 1 1;
}
<div class="application-body">
    <div class="application-header">
      APP HEADER
    </div>
    <div class="application-content">
      <div class="content-header">
        CONTENT HEADER
      </div>
      <div class="content">
        CONTENT
        <ul>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Aliquam tincidunt mauris eu risus.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
          <li>Vestibulum auctor dapibus neque.</li>
        </ul>  
      </div>
      <div class="content-footer">
        CONTENT FOOTER
      </div>
    </div>
    <div class="application-footer">
      © All rights reserved by TEST Ltd. 2015
    </div>
  </div>

相关问题
最新问题