添加一个页脚DIV和标题DIV到我当前的CSS Flexbox布局 [英] Add a Footer DIV and Header DIV to my current CSS Flexbox Layout

查看：82 发布时间：2017/2/9 12:29:12 css css3 flexbox

本文介绍了添加一个页脚DIV和标题DIV到我当前的CSS Flexbox布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

下面是我正在开发的CSS FLexbox布局。这里有一个实例，以及不断更新的CodePen：

演示

  .wrapper {border：1px固体＃D7DBDD; margin-bottom：100px; max-width：1076px;}。button {padding：5px 15px;颜色：#FFF; background-color：＃4EBBE4; border：1px solid＃16A2D7; border-radius：4px; font-size：16px; cursor：pointer; font-family：Raleway，Helvetica，sans-serif;}。siteHeader {/ ** *用* flexbox展开这个容器的子项，默认是水平的。 * / display：flex; / ** *使容器在孩子之间放置尽可能多的空间*，孩子们在任一*端与容器的边缘齐平。 * / justify-content：space-between; padding：10px; background-color：＃56727C;}。siteHeader__section {/ ** *使用* flexbox布局此容器的子项。 * / display：flex; / ** *将孩子们对准中心，沿*主轴。默认情况下，孩子们将沿着它们的顶部边缘对齐。 * / align-items：center;}。siteHeader__item {padding：5px 15px; font-size：12px;}。siteHeader__item + .siteHeader__item {margin-left：5px;}。siteHeader__item.is-site-header-item-selected {color：#FFFFFF; background-color：＃415F69; border-radius：4px;}。siteHeaderLogo {font-size：20px; line-height：0; color：white;}。siteHeaderButton {cursor：pointer; color：＃D9E9EF;}。container {display：flex; flex-direction：row;} main {display：flex; width：100％;}。sideBar {/ ** *此容器根据flexbox *规则订购项目。默认情况下，这将水平安排其孩子*。但是，下一个属性... * / display：flex; / ** * ...设置主轴为垂直而不是水平，因此现在孩子们从上到下垂直排列。 * / flex-direction：column; / ** *它还会在孩子之间放置尽可能多的空间*，孩子们在两端*与容器的边缘齐平。 * / justify-content：space-between; height：auto; width：150px; background-color：#FCFDFD; padding：10px;}。sideBar-left {border-right：1px solid＃D7DBDD;}。sideBar-right {border-left：1px solid＃D7DBDD; width：750px;}。sideBar__item {cursor：pointer; padding：5px 10px;颜色：＃16A2D7; font-size：12px;}。sideBar__item.is-side-bar-item-selected {background-color：＃EEF3F5; border-radius：4px;}。formFooter {/ ** *用* flexbox展开这个容器的子元素，默认情况下是水平的。 * / display：flex; / ** *使容器在孩子之间放置尽可能多的空间*，孩子们在任一*端与容器的边缘齐平。 * / justify-content：space-between; / ** *将孩子们对准中心，沿*主轴，在这种情况下是水平的。 * / align-items：center; border-top：1px solid＃D7DBDD; padding：10px;}。formFooter__section {/ ** *此容器水平地排列项目。 * / display：flex; / ** *它们在中心垂直对齐。 * / align-items：center;}。formFooter__item + .formFooter__item {margin-left：5px;}。formFooterFeedback {color：＃86969C; font-size：12px; line-height：0;}。formFooterSpinner {animation：formFooterSpinner 1s无限步（8，end）;} @ keyframes formFooterSpinner {0％{transform：rotate（0deg）; } 100％{transform：rotate（360deg）; }}。button  -  clear {color：＃16A2D7; background-color：#FFFFFF; border：1px solid #FFFFFF;}。centeredPrompt {/ ** *使用* flexbox布局此容器的子项。 * / display：flex / ** *旋转主轴使儿童*垂直放置，与上述侧栏中的*相同。 * / flex-direction：column; / ** *不像之前的例子中那样推动孩子们分开，我们将他们组合在一起*在他们的容器的中心。 * / justify-content：center; / ** *将孩子们对准中心，沿*主轴。因为方向是*列，这具有与设置* text-align：center类似的效果。 * / align-items：center; min-height：300px; padding：10px; width：100％;}。centeredPrompt__item + .centeredPrompt__item {margin-top：5px;}。centerPromptIcon {font-size：60px; line-height：0;}。centeredPromptLabel {color：＃86969C; font-size：30px; font-weight：700; text-align：center;}。centeredPromptDetails {color：＃86969C; font-size：16px; margin-bottom：10px; text-align：center;}。icon {color：＃BCD2DA;}。gallery {/ ** *用* flexbox展开这个容器的子元素，默认是水平的。 * / display：flex; / ** *允许孩子包装到下一个行，而不是试图把它们全部挤压成一行。 * / flex-wrap：wrap; width：100％; padding：5px;}。photo {display：flex; -ms-flex-pack：end; justify-content：flex-end; -ms-flex-align：end; align-items：flex-end; width：145px; margin：5px; padding：5px 10px; font-size：18px; font-weight：700; text-shadow：0 2px 3px rgba（0，0，0，.5）;颜色：#FFF; background-size：cover; background-position：center; border-radius：4px; height：130px;不透明度：1; border：4px solid #ffffff; cursor：pointer;}。photo.selected，.photo：hover {opacity：0.3; border：4px solid＃F44336;}。photo1 {background-image：url（'http://www.flexboxpatterns.com/images/dog_2.jpg'）;} .photo2 {background-image：url（'http： /www.flexboxpatterns.com/images/dog_2.jpg');}.photo3 {background-image：url（'http://www.flexboxpatterns.com/images/dog_3.jpg'）;} .photo4 {background- image：url（'http://www.flexboxpatterns.com/images/dog_4.jpg'）;} .photo5 {background-image：url（'http://www.flexboxpatterns.com/images/dog_5.jpg' ）;}。photo6 {background-image：url（'http://www.flexboxpatterns.com/images/dog_1.jpg'）;} .photo7 {background-image：url（'http：//www.flexboxpatterns。 com / images / dog_2.jpg'）;}。photo8 {background-image：url（'http://www.flexboxpatterns.com/images/dog_3.jpg'）;} .photo9 {background-image：url http://www.flexboxpatterns.com/images/dog_4.jpg');}.photo10 {background-image：url（'http://www.flexboxpatterns.com/images/dog_5.jpg'）;}

 < div class =wrapper> <！ -  START HEADER  - > < div class =siteHeader> <！ - 此部分被推到左侧 - > < div class =siteHeader__section> < div class =siteHeader__item siteHeaderLogo> < div class =fa fa-inbox>< / div> < / div> < div class =siteHeader__item siteHeaderButton is-site-header-item-selected> Inbox< / div> < div class =siteHeader__item siteHeaderButton>已发送< / div> < div class =siteHeader__item siteHeaderButton>垃圾箱< / div> < / div> <！ - 此部分被推向右侧 - > < div class =siteHeader__section> < div class =siteHeader__item siteHeaderButton>设置< / div> < div class =siteHeader__item siteHeaderButton>退出< / div> < / div> < / div> <！ -  END HEADER  - > < div class =container> <！ -  START LEFT SIDEBAR  - > < div class =sideBar sideBar-left> <！ - 此部分被推到顶部 - > < div class =sideBar__section> < div class =sideBar__item is-side-bar-item-selected> Inbox< / div> < div class =sideBar__item> Contacts< / div> < div class =sideBar__item>帐户< / div> < / div> <！ - 此部分被推到底部 - > < div class =sideBar__section> < div class =sideBar__item>更改主题< / div> < div class =sideBar__item> Legal< / div> < / div> < / div> <！ -  END LEFT SIDEBAR  - > < main> <！ -  START GALLERY  - > <  -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   - < div class =gallery> < div class =photo photo1 photo  -  large> 1< / div> < div class =photo photo2 photo  -  large> 2< / div> < div class =photo photo3 photo  -  large> 3< / div> < div class =photo photo4 photo  -  large> 4< / div> < div class =photo photo5 photo  -  large> 5< / div> < div class =photo photo6 photo  -  large selected> 6< / div> < div class =photo photo7 photo  -  large> 7< / div> < div class =photo photo8 photo  -  large> 8< / div> < div class =photo photo9 photo  -  large> 9< / div> < div class =photo photo10 photo  -  large> 10< / div> < / div> <！ -  END GALLERY  - > < / main> <！ -  END CENTERED PROMPT  - > <！ -  RIGHT-SIDEBAR  - > < div class =sideBar sideBar-right>表单字段将在此加载来自左面板中所选图像的数据<！ - 此部分被推到顶部 - < div class =sideBar__section> < div class =sideBar__item is-side-bar-item-selected> Inbox< / div> < div class =sideBar__item> Contacts< / div> < div class =sideBar__item>帐户< / div> < / div>  - > < / div> <！ -  END RIGHT-SIDEBAR  - > < / div> <！ -  START BOTTOM FORM FOOTER BAR  - > < div class =formFooter> <！ - 此部分被推到左侧 - > < div class =formFooter__section> < div class =formFooter__item formFooterFeedback> < div class =fa fa-spinner formFooterSpinner>< / div>& nbsp;保存...< / div> < / div> <！ - 此部分被推向右侧 - > < div class =formFooter__section> < div class =formFooter__item button button  -  clear> Reset< / div> < div class =formFooter__item button>保存< / div> < / div> < / div> < / div>

< 注意：此解决方案假设工具栏不会在运行中改变高度。

这里的诀窍是将填充应用于 position：relative; container，与 position：absolute; 工具栏的大小一致。因为可能你将再次使用元素的 formFooter 和 main ，我们将使用实用程序类表示它们有工具栏。这些实用程序类将包含有关 padding 的信息，在 formFooter 的情况下，扩展它们的行为

   
  main.with-header {
 padding-top：50px; 
 position：relative; 
} 
 .gallery  -  header {
 height：50px; 
 top：0; 
 left：0; 
 right：0; 
 background-color：blue; 
 position：absolute; 
} 
 .sideBar.sideBar-with-footer {
 position：relative; 
 padding-bottom：50px; 
} 
 .sideBar.sideBar-with-footer .formFooter {
 position：absolute; 
 bottom：0; 
 left：0; 
 right：0; 
} 
  
  HTML  
 < div class =wrapper> 
<！ -  START HEADER  - > 
< div class =siteHeader> 
<！ - 此部分被推到左侧 - > 
< div class =siteHeader__section> 
< div class =siteHeader__item siteHeaderLogo> 
< div class =fa fa-inbox>< / div> 
< / div> 
< div class =siteHeader__item siteHeaderButton is-site-header-item-selected> Inbox< / div> 
< div class =siteHeader__item siteHeaderButton>已发送< / div> 
< div class =siteHeader__item siteHeaderButton>垃圾箱< / div> 
< / div> 
<！ - 此部分被推向右侧 - > 
< div class =siteHeader__section> 
< div class =siteHeader__item siteHeaderButton>设置< / div> 
< div class =siteHeader__item siteHeaderButton>退出< / div> 
< / div> 
< / div> 
<！ -  END HEADER  - > 
 
< div class =container> 
 
<！ -  START LEFT SIDEBAR  - > 
< div class =sideBar sideBar-left> 
<！ - 此部分被推到顶部 - > 
< div class =sideBar__section> 
< div class =sideBar__item is-side-bar-item-selected> Inbox< / div> 
< div class =sideBar__item> Contacts< / div> 
< div class =sideBar__item> Account< / div> 
< / div> 
<！ - 此部分被推到底部 - > 
< div class =sideBar__section> 
< div class =sideBar__item>更改主题< / div> 
< div class =sideBar__item> Legal< / div> 
< / div> 
< / div> 
<！ -  END LEFT SIDEBAR  - > 
 
< main class =with-header> 
< div class =gallery  -  header> 
< p>图库标题< / p> 
< / div> 
<！ -  START GALLERY  - > 
<！ - 它应该是左边栏的权利，但是当前在边栏下面并且FORM FOOTER BAR  - > 
< div class =gallery> 
< div class =photo photo photo  -  large> 1< / div> 
< div class =photo photo2 photo  -  large> 2< / div> 
< div class =photo photo3 photo  -  large> 3< / div> 
< div class =photo photo4 photo  -  large> 4< / div> 
< div class =photo photo5 photo  -  large> 5< / div> 
< div class =photo photo6 photo  -  large selected> 6< / div> 
< div class =photo photo7 photo  -  large> 7< / div> 
< div class =photo photo8 photo  -  large> 8< / div> 
< div class =photo photo9 photo  -  large> 9< / div> 
< div class =photo photo10 photo  -  large> 10< / div> 
< / div> 
<！ -  END GALLERY  - > 
 
< / main> 
<！ -  END CENTERED PROMPT  - > 
 
<！ -  RIGHT-SIDEBAR  - > 
< div class =sideBar sideBar-right sideBar-with-footer> 
<！ -  START BOTTOM FORM FOOTER BAR  - > 
< div class =formFooter> 
<！ - 此部分被推到左侧 - > 
< div class =formFooter__section> 
< div class =formFooter__item formFooterFeedback> 
< div class =fa fa-spinner formFooterSpinner>< / div>& nbsp; Saving ... 
< / div& 
< / div> 
<！ - 此部分被推向右侧 - > 
< div class =formFooter__section> 
< div class =formFooter__item button button  -  clear> Reset< / div> 
< div class =formFooter__item button>保存< / div> 
< / div> 
< / div> 
<！ -  END BOTTOM FORM FOOTER BAR  - > 
 
< / div> 
<！ -  END RIGHT-SIDEBAR  - > 
< / div> 
 
< / div> 
  
   CODEPEN   
 
Below is the CSS FLexbox layout I am working on.  A live example is here as well as on this CodePen which is constantly updated: http://codepen.io/jasondavis/pen/OWbXNB?editors=1100

I need to add 2 DIV's to the layout and need help getting them positioned where I need them.


Add a header DIV above the right content panel
Add a Form Footer DIV like the current wrapper Footer with save and reset buttons along with saving indicator at the bottom of the Right Sidebar
Lastly I need to remove the current footer, so basdically the current footer just needs to be moved to the right sidebar.


So far I have tried multiple Flexbox CSS properties to try and get it into the desired positions with no luck so far.

This image shows what I need better...


Demo



.wrapper {
  border: 1px solid #D7DBDD;
  margin-bottom: 100px;
  max-width: 1076px;
}
.button {
  padding: 5px 15px;
  color: #FFF;
  background-color: #4EBBE4;
  border: 1px solid #16A2D7;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  font-family: Raleway, Helvetica, sans-serif;
}
.siteHeader {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;
  /**
   * Make the container put as much space as possible
   * between its children, with the children at either
   * end laying flush against the container's edges.
   */
  justify-content: space-between;
  padding: 10px;
  background-color: #56727C;
}
.siteHeader__section {
  /**
     * Lay out the children of this container with
     * flexbox.
     */
  display: flex;
  /**
     * Align the children in the center, along
     * the main axis. By default the children will
     * align along their top edges.
     */
  align-items: center;
}
.siteHeader__item {
  padding: 5px 15px;
  font-size: 12px;
}
.siteHeader__item + .siteHeader__item {
  margin-left: 5px;
}
.siteHeader__item.is-site-header-item-selected {
  color: #FFFFFF;
  background-color: #415F69;
  border-radius: 4px;
}
.siteHeaderLogo {
  font-size: 20px;
  line-height: 0;
  color: white;
}
.siteHeaderButton {
  cursor: pointer;
  color: #D9E9EF;
}
.container {
  display: flex;
  flex-direction: row;
}
main {
  display: flex;
  width: 100%;
}
.sideBar {
  /**
   * This container orders items according to flexbox
   * rules. By default, this would arrange its children
   * horizontally. However, the next property...
   */
  display: flex;
  /**
   * ...sets the main axis to be vertical instead of
   * horizontal, so now the children are laid out
   * vertically, from top to bottom.
   */
  flex-direction: column;
  /**
   * It will also put as much space as possible
   * between its children, with the children at either end
   * laying flush against the container's edges.
   */
  justify-content: space-between;
  height: auto;
  width: 150px;
  background-color: #FCFDFD;
  padding: 10px;
}
.sideBar-left {
  border-right: 1px solid #D7DBDD;
}
.sideBar-right {
  border-left: 1px solid #D7DBDD;
  width: 750px;
}
.sideBar__item {
  cursor: pointer;
  padding: 5px 10px;
  color: #16A2D7;
  font-size: 12px;
}
.sideBar__item.is-side-bar-item-selected {
  background-color: #EEF3F5;
  border-radius: 4px;
}
.formFooter {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;
  /**
   * Make the container put as much space as possible
   * between its children, with the children at either
   * end laying flush against the container's edges.
   */
  justify-content: space-between;
  /**
   * Align the children in the center, along
   * the main axis, which is horizontal in this case.
   */
  align-items: center;
  border-top: 1px solid #D7DBDD;
  padding: 10px;
}
.formFooter__section {
  /**
     * This container orders items horizontally.
     */
  display: flex;
  /**
     * It aligns them vertically in the center.
     */
  align-items: center;
}
.formFooter__item + .formFooter__item {
  margin-left: 5px;
}
.formFooterFeedback {
  color: #86969C;
  font-size: 12px;
  line-height: 0;
}
.formFooterSpinner {
  animation: formFooterSpinner 1s infinite steps(8, end);
}
@keyframes formFooterSpinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.button--clear {
  color: #16A2D7;
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.centeredPrompt {
  /**
   * Lay out the children of this container with
   * flexbox.
   */
  display: flex;
  /**
   * Rotate the main axis so that the children
   * are laid out vertically, the same as in the
   * above "Side bar" example.
   */
  flex-direction: column;
  /**
   * Instead of pushing the children apart, as in
   * previous examples, we will group them together
   * in the center of their container.
   */
  justify-content: center;
  /**
   * Align the children in the center, along
   * the main axis. Because the direction is
   * "column" this has a similar effect as setting
   * text-align: center.
   */
  align-items: center;
  min-height: 300px;
  padding: 10px;
  width: 100%;
}
.centeredPrompt__item + .centeredPrompt__item {
  margin-top: 5px;
}
.centeredPromptIcon {
  font-size: 60px;
  line-height: 0;
}
.centeredPromptLabel {
  color: #86969C;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}
.centeredPromptDetails {
  color: #86969C;
  font-size: 16px;
  margin-bottom: 10px;
  text-align: center;
}
.icon {
  color: #BCD2DA;
}
.gallery {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;
  /**
   * Allow the children to wrap to the next "row",
   * instead of trying to squeeze them all into
   * a single row.
   */
  flex-wrap: wrap;
  width: 100%;
  padding: 5px;
}
.photo {
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  width: 145px;
  margin: 5px;
  padding: 5px 10px;
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .5);
  color: #FFF;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  height: 130px;
  opacity: 1;
  border: 4px solid #ffffff;
  cursor: pointer;
}
.photo.selected,
.photo:hover {
  opacity: 0.3;
  border: 4px solid #F44336;
}
.photo1 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_2.jpg');
}
.photo2 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_2.jpg');
}
.photo3 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_3.jpg');
}
.photo4 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_4.jpg');
}
.photo5 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_5.jpg');
}
.photo6 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_1.jpg');
}
.photo7 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_2.jpg');
}
.photo8 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_3.jpg');
}
.photo9 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_4.jpg');
}
.photo10 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_5.jpg');
}

<div class="wrapper">
  <!-- START HEADER -->
  <div class="siteHeader">
    <!-- This section gets pushed to the left side-->
    <div class="siteHeader__section">
      <div class="siteHeader__item siteHeaderLogo">
        <div class="fa fa-inbox"></div>
      </div>
      <div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
      <div class="siteHeader__item siteHeaderButton">Sent</div>
      <div class="siteHeader__item siteHeaderButton">Trash</div>
    </div>
    <!-- This section gets pushed to the right side-->
    <div class="siteHeader__section">
      <div class="siteHeader__item siteHeaderButton">Settings</div>
      <div class="siteHeader__item siteHeaderButton">Log out</div>
    </div>
  </div>
  <!-- END HEADER -->


  <div class="container">

    <!-- START LEFT SIDEBAR -->
    <div class="sideBar sideBar-left">
      <!-- This section gets pushed to the top-->
      <div class="sideBar__section">
        <div class="sideBar__item is-side-bar-item-selected">Inbox</div>
        <div class="sideBar__item">Contacts</div>
        <div class="sideBar__item">Account</div>
      </div>
      <!-- This section gets pushed to the bottom-->
      <div class="sideBar__section">
        <div class="sideBar__item">Change theme</div>
        <div class="sideBar__item">Legal</div>
      </div>
    </div>
    <!-- END LEFT SIDEBAR -->


    <main>
      <!-- START GALLERY -->
      <!-- IT SHOULKD BE TO THE RIGHT OF THE LEFT SIDEBAR BUT IS CURRENTLY BELOW THE SIDEBAR AND FORM FOOTER BAR -->
      <div class="gallery">
        <div class="photo photo1 photo--large">1</div>
        <div class="photo photo2 photo--large">2</div>
        <div class="photo photo3 photo--large">3</div>
        <div class="photo photo4 photo--large">4</div>
        <div class="photo photo5 photo--large">5</div>
        <div class="photo photo6 photo--large selected">6</div>
        <div class="photo photo7 photo--large">7</div>
        <div class="photo photo8 photo--large">8</div>
        <div class="photo photo9 photo--large">9</div>
        <div class="photo photo10 photo--large">10</div>
      </div>
      <!-- END GALLERY -->


    </main>
    <!-- END CENTERED PROMPT -->

    <!-- RIGHT-SIDEBAR-->
    <div class="sideBar sideBar-right">

      Form fields will be here loaded with Data from the selected image in the left panel
      <!-- This section gets pushed to the top-
      <div class="sideBar__section">
        <div class="sideBar__item is-side-bar-item-selected">Inbox</div>
        <div class="sideBar__item">Contacts</div>
        <div class="sideBar__item">Account</div>
      </div>
-->

    </div>
    <!-- END RIGHT-SIDEBAR-->
  </div>


  <!-- START BOTTOM FORM FOOTER BAR -->
  <div class="formFooter">
    <!-- This section gets pushed to the left side-->
    <div class="formFooter__section">
      <div class="formFooter__item formFooterFeedback">
        <div class="fa fa-spinner formFooterSpinner"></div>&nbsp;Saving...
      </div>
    </div>
    <!-- This section gets pushed to the right side-->
    <div class="formFooter__section">
      <div class="formFooter__item button button--clear">Reset</div>
      <div class="formFooter__item button">Save</div>
    </div>
  </div>
  <!-- END BOTTOM FORM FOOTER BAR -->

</div>



 解决方案 
NOTE: This solution assumes that the toolbars arent going to be changing height on-the-fly. 

The trick here is to apply padding to a position:relative; container, consistent with the sizing of a position:absolute; toolbar. Because it is likely you're going to be using the element's formFooter and main again, we will use utility classes to indicate that they have toolbars. These utility classes will contain the information about the padding and, in the case of the formFooter, extend their behaviour when a child of the utility class.

CSS
main.with-header{
  padding-top:50px;
  position:relative;
}
.gallery--header{
  height:50px;
  top:0;
  left:0;
  right:0;
  background-color:blue;
  position:absolute;
}
.sideBar.sideBar-with-footer{
  position:relative;
  padding-bottom:50px;
}
.sideBar.sideBar-with-footer .formFooter{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}
HTML
<div class="wrapper">
    <!-- START HEADER -->
    <div class="siteHeader">
        <!-- This section gets pushed to the left side-->
        <div class="siteHeader__section">
            <div class="siteHeader__item siteHeaderLogo">
                <div class="fa fa-inbox"></div>
            </div>
            <div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
            <div class="siteHeader__item siteHeaderButton">Sent</div>
            <div class="siteHeader__item siteHeaderButton">Trash</div>
        </div>
        <!-- This section gets pushed to the right side-->
        <div class="siteHeader__section">
            <div class="siteHeader__item siteHeaderButton">Settings</div>
            <div class="siteHeader__item siteHeaderButton">Log out</div>
        </div>
    </div>
    <!-- END HEADER -->

    <div class="container">

        <!-- START LEFT SIDEBAR -->
        <div class="sideBar sideBar-left">
            <!-- This section gets pushed to the top-->
            <div class="sideBar__section">
                <div class="sideBar__item is-side-bar-item-selected">Inbox</div>
                <div class="sideBar__item">Contacts</div>
                <div class="sideBar__item">Account</div>
            </div>
            <!-- This section gets pushed to the bottom-->
            <div class="sideBar__section">
                <div class="sideBar__item">Change theme</div>
                <div class="sideBar__item">Legal</div>
            </div>
        </div>
        <!-- END LEFT SIDEBAR -->

        <main class="with-header">
            <div class="gallery--header">
                <p>Gallery Header</p>
            </div>
            <!-- START GALLERY -->
            <!-- IT SHOULKD BE TO THE RIGHT OF THE LEFT SIDEBAR BUT IS CURRENTLY BELOW THE SIDEBAR AND FORM FOOTER BAR -->
            <div class="gallery">
                <div class="photo photo1 photo--large">1</div>
                <div class="photo photo2 photo--large">2</div>
                <div class="photo photo3 photo--large">3</div>
                <div class="photo photo4 photo--large">4</div>
                <div class="photo photo5 photo--large">5</div>
                <div class="photo photo6 photo--large selected">6</div>
                <div class="photo photo7 photo--large">7</div>
                <div class="photo photo8 photo--large">8</div>
                <div class="photo photo9 photo--large">9</div>
                <div class="photo photo10 photo--large">10</div>
            </div>
            <!-- END GALLERY -->

        </main>
        <!-- END CENTERED PROMPT -->

        <!-- RIGHT-SIDEBAR-->
        <div class="sideBar sideBar-right sideBar-with-footer">
            <!-- START BOTTOM FORM FOOTER BAR -->
            <div class="formFooter">
                <!-- This section gets pushed to the left side-->
                <div class="formFooter__section">
                    <div class="formFooter__item formFooterFeedback">
                        <div class="fa fa-spinner formFooterSpinner"></div>&nbsp;Saving...
                    </div>
                </div>
                <!-- This section gets pushed to the right side-->
                <div class="formFooter__section">
                    <div class="formFooter__item button button--clear">Reset</div>
                    <div class="formFooter__item button">Save</div>
                </div>
            </div>
            <!-- END BOTTOM FORM FOOTER BAR -->

        </div>
        <!-- END RIGHT-SIDEBAR-->
    </div>

</div>
CODEPEN

                        这篇关于添加一个页脚DIV和标题DIV到我当前的CSS Flexbox布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

添加一个页脚DIV和标题DIV到我当前的CSS Flexbox布局 [英] Add a Footer DIV and Header DIV to my current CSS Flexbox Layout

问题描述

演示

Demo

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

添加一个页脚DIV和标题DIV到我当前的CSS Flexbox布局 [英] Add a Footer DIV and Header DIV to my current CSS Flexbox Layout

问题描述

演示

Demo

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭