css - 将页脚 DIV 和页眉 DIV 添加到我当前的 CSS Flexbox 布局-6ren

css - 将页脚 DIV 和页眉 DIV 添加到我当前的 CSS Flexbox 布局

转载作者：太空宇宙更新时间：2023-11-04 09:16:32

下面是我正在处理的 CSS FLexbox 布局。此处以及不断更新的 CodePen 上都有一个实例:http://codepen.io/jasondavis/pen/OWbXNB?editors=1100

我需要向布局添加 2 个 DIV，并且需要帮助将它们定位在我需要的位置。

在右侧内容面板上方添加标题 DIV
添加一个表单页脚 DIV，就像当前包装页脚一样，带有保存和重置按钮以及右侧栏底部的保存指示器
最后我需要删除当前页脚，因此基本上只需将当前页脚移至右侧边栏即可。

到目前为止，我已经尝试了多个 Flexbox CSS 属性来尝试将其置于所需的位置，但没有成功。

这张图片显示了我需要更好的...

演示

.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>

最佳答案

注意:此解决方案假定工具栏不会即时更改高度。

这里的技巧是将 padding 应用于 position:relative; 容器，与 position:absolute; 工具栏的大小一致.因为您可能会再次使用元素的 formFooter 和 main，所以我们将使用实用程序类来指示它们具有工具栏。这些实用程序类将包含有关 padding 的信息，并且在 formFooter 的情况下，扩展它们作为实用程序类的子级的行为。

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

关于css - 将页脚 DIV 和页眉 DIV 添加到我当前的 CSS Flexbox 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41731426/

文章推荐： java - 如何正确实现 Google Play 结算库

文章推荐： linux - 在 Ubuntu 16.04 上模拟 SLURM

文章推荐： python - 如何在 Python 中使用 SSL？

css - 如何将 CSS 文件的 CSS 规则包含到另一个 CSS 文件的选择器中？
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点？ .someClass { //apply rules to
css - 将 css 文件移动到新的 css 文件夹后无法从我的 css 访问我的图片
在更新我的 css 之前，我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
css - css 3 中是否有任何 css 类分组 css 类？
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
css - 使用内联 CSS 删除从 CSS 文件继承的 CSS 属性
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。但是，如果元素中的某个属性弄乱了特定页面，而我不想只使用内联 CSS 在该页面中使用它怎么办
css - 初始规模与 desktop.css+phone.css+tablet.css？
我刚刚发现了 initial-scale 元属性。以前，我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素)，以便它们在桌面计算机的屏幕上显示得很好。然后，如果您使用的是
css - LESS CSS - 提取生成的 CSS
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗？我不想使用脚本
css - 如何将内联 CSS 转换为外部 CSS？
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页，我可以手动完成。但是有100页。有人有想法吗？最佳答案就像有人说的那样，“
css - 来自样式化组件时 CSS 模块中的动态 CSS
当我想从 Styled Components 迁移到 CSS Modules 时，出现了以下问题。假设我有以下样式组件，它接受动态参数 offset和一个动态 CSS 字符串 theme : con
css - 在 CSS 中引用 CSS
有没有办法将 CSS 类定义为与另一个类相等？例如，如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
css - 如何基于一个元素的 CSS 或它的前一个相邻兄弟的 CSS？
我正在尝试制作一组按钮，这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据，然后我用它来显示按钮。我的问题在于让按
css - 浏览器是否在加载 CSS 文件时解析 CSS？
浏览器是否在加载 CSS 文件时解析 CSS？还是在整个 CSS 文件被浏览器下载后才进行解析？不同浏览器的做法有区别吗？我在哪里可以找到这种底层信息？这个问题不是 Load and executi
css - 将已经定义的 CSS 添加到另一个 CSS
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。标题有点乱，我给大家看一下。假
css - css/main.css 是否还有其他用途？
我遇到了最奇怪的问题...... 在最简单的形式中，我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中，我已经大大减少了它) 当我查看页面的源代码时，我得到以下信息:
css - 如果缺少所需的 css，则加载备用 css
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间，min 文件不会与系统的其余部分一起发布。我有很多 css
css - CSS 框架和 CSS 网格有什么区别
请告诉我 CSS 框架和 CSS 网格之间的区别。最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途，例如 Hartija
css - 如何摆脱从 css 文件继承的 css？
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
css - 带有 CSS 模块的普通 CSS
我以前使用 bootstrap css import 很好。但是我正在尝试使用 CSS 模块，所以我添加了几行。 { test: /\.css$/, use:
css - CSS 中的嵌套 CSS 选择器
有没有办法在 css 选择器中创建一个 css 组。例如: .SectionHeader { include: .foo; include: .bar; include: .
css - CSS 定位和 CSS 边距之间的区别
今天我学习了 CSS 中的两个概念，一个是 CSS 定位(静态、相对、绝对、固定)，另一个是 CSS Margin，它定义了元素之间的空间。假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎
css - Gulp CSS 任务不会覆盖现有的 CSS
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 将页脚 DIV 和页眉 DIV 添加到我当前的 CSS Flexbox 布局

演示