-1

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

这适用于“内容”中的所有内容，除了页脚。我目前的宽度为 100%，位置固定在底部。当侧边栏展开时，页脚的宽度不会像它的父“内容”容器那样改变；最右边的部分只是被推离屏幕。

我怎样才能使页脚与其余内容一起调整大小？

我试过删除位置：固定，我得到了我想要的行为，但页脚不再位于底部。在保持调整大小的同时，还有其他方法可以使页脚留在那里吗？

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

#footer {
position:fixed;
}

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

4

1 回答 1

0 

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>

于 2018-09-04T07:41:00.643 回答