Question

我需要以下适当的HTML和CSS

这是应用程序的布局


   Detailed Figure                      General Figure

-------------------------         -------------------------
|    App Header         |         |    App Header         |
-------------------------         -------------------------
| Module Header|  Sub   |         |              |        |
|--------------| Module |         |              |        |
|              |--------|         |              |        |
|  Module      |  Sub   |         |    Main      | Sub    |
|  Content     | Module |         |    Module    | Module |
|              |--------|         |    Space     | Space  |
|              |  Sub   |         |              |        |
|--------------| Module |         |              |        |
|  Module      |--------|         |              |        |
|  Footer      |        |         |              |        |
-------------------------         -------------------------

App Header是静态的60px
模块标题是静态的35px
模块内容是动态的并且溢出
模块页脚是动态的，需要始终在屏幕上显示所有内容（永远不会超过500像素）

设置主模块空间和子级的适当方法是什么？
如何让页眉和页脚了解它们是在容器中并且不应覆盖屏幕的整个宽度？

（我在页脚中使用了绝对位置，但是这导致模块内容隐藏在模块页脚的后面）

Answer 1

我大部分都想通了 https://jsfiddle.net/jackyFrosty/46mjtghv/47/

<div class='mainApp'>
  <div class='appHeader'>
    Header
  </div>
  <div class='contentContainer'>
    <div class='leftContainer'>
      <div class='moduleContainer'>    
        <header class='header'>
          Header
        </header>
        <main class='content'>
          <div>Content 1</div><div>Content 2</div><div>Content 3</div><div>Content 4</div>
          <div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div>
          <div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div>
          <div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div>
          <div>Content 96</div><div>Content 97</div><div>Content 98</div><div>Content 99</div>
        </main>
        <footer class='footer'>
          <div>Footer</div><div>Footer</div><div>Footer</div><div>Footer</div>
          <!--div>Footer</div><div>Footer</div><div>Footer</div><div>Footer</div-->
        </footer>
      </div>
    </div>
    <div class='rightContainer'>
      Right Content
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
  border-style: solid;
  border-color: white;
  padding: 0px;
  margin: 0px;
}

.mainApp {
  height: 100%;
}

.appHeader {
  height: 60px;
  border-color: black;
}

.contentContainer {
  height: calc(100vh - 60px);
}

.leftContainer {
  float: left;
  width: 75%;
  height: 100%;
  overflow: auto;
 border-color: black;
}

.rightContainer {
 float: left;
 width: 25%;
 height: 100%;
 overflow: auto;
 border-color: black;
}

/* /////////// Important part ////////// */
.moduleContainer {
  border-color: orange;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
}

.header {
  border-color: red;
  height: 35px;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

.content {
  border-color: green;
  overflow-y: scroll;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}

.footer {
  border-color: blue;
}

如何在容器内放置页眉和页脚？

1 个答案: