Question

我有一个可折叠的侧边栏，当展开时，应将整个“内容”部分缩小到剩余空间。

这适用于“目录”中除页脚以外的所有内容。我目前以100％的宽度将其固定在底部。当侧边栏展开时，页脚的宽度不会像其父级“内容”容器那样变化。最右边的部分刚刚移出屏幕。

我如何做到这一点，以便页脚可以调整其余内容的大小？

我尝试删除position：fixed，并且得到了想要的行为，但是页脚不再位于底部。有没有其他方法可以使页脚停留在该位置，同时保持调整大小？

编辑：这是显示问题的JSFiddle。

#footer {
position:fixed;
}

已设置。 http://jsfiddle.net/2btq791r/8/

Answer 1

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

/**
 * Footer Styles
 */

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

<div class="container">
	<div class="row">
		<div class="demo">
      <h1>CSS “Always on the bottom” Footer</h1>

      <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

      <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

      <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

      <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
    </div>

    <div class="footer">
      This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.
    </div>

  </div>
</div>

固定页脚大小调整

1 个答案: