Question

有没有办法让标题，容器和页脚需要包含整个布局而不使用CSS中的固定位置 html fiddle

header img {
  width: 100%;
}

footer {
  height: 40px;
  background: #666;
  color:#fff;
}

CSS：

<img src="#" alt="cartoon">

Answer 1

这样的东西？：

＆＃13;

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
#page {
  height: 100%;
}
#header {
  height: 50px;
  background: yellow;
}
#content {
  height: calc(100% - 100px);
  background: grey;
  overflow: auto;
}
#footer {
  height: 50px;
  background: blue;
}

＆＃13;

<div id="page">
  <div id="header">Header</div>
  <div id="content">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="footer">Footer</div>
</div>

＆＃13;

Answer 2

您当前的结构会强制页面按您的意愿运行。标题，内容区域和页脚。除非你强迫它们，否则它们的定位不会改变。

如果您计划将此内容放在页面的指定区域内，只需将整个内容放在div标签中，并以百分比形式给出宽度。后来使用“margin：0px auto;”在那个div上将它对齐在中心。

我希望这就是你要找的东西。如果有效，请告诉我。

Answer 3

您可以使用flex模型（除非您想支持旧浏览器）

example

/*layout */

body {
  margin: 0;
}
.wrapper {
  height: 100vh;
  display: flex;
  flex-flow: column;
}
.container {
  flex: 1;/*flex child to fill whole space left and eventually scrolls */
  overflow: auto;
}
/* makeup*/

.container {
  background: pink;
}
img[src*="grass"] {
  width: 100%;
  vertical-align: top;
}
footer {
  background: #86B31C
}

<div class="wrapper">
  <header><!-- any height -->
    <img src="https://www.ecobin.com.au/skin/frontend/ultimo/default/images/footer_grass.jpg" alt="" />
  </header>
  <div class="container">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <footer>footer content of any height
    <br/>come here</footer>
</div>

注意注意在包装器上设置一些最小高度或在页脚+标题上设置最大高度以避免它们在小屏幕上填充整个窗口的高度，并避免容器被挤压到零;）

标题，容器和页脚需要包含整个布局而不使用固定位置

3 个答案: