Question

我想让左侧边栏动态向下延伸到页脚。页脚是一个粘性的页脚，这意味着无论主要内容有多长，它都会留在那里。

无论主要内容的高度如何，我都希望左侧边栏向下延伸到页脚。

html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0 0 50px;
  /* bottom = footer height */
}

.container {
  height: auto;
  overflow: hidden;
}

.left {
  width: 180px;
  float: left;
  background: #aafed6;
}

.right {
  float: none;
  /* not needed, just for clarification */
  background: #e8f6fe;
  /* the next props are meant to keep this block independent from the other floated one */
  width: auto;
  overflow: hidden;
}

footer {
  width: 100%;
  background-color: #000;
  color: #fff;
  padding: 1em;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

<div class="container">

  <div class="left">
    left content fixed width
    <br>
    <br> I want this to extend to footer!
  </div>

  <div class="right">
    right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
  </div>

</div>

<footer>
  This is my footer.
</footer>

Answer 1

更新：

以下css代码将执行此操作：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  display: flex;
  flex: 1;
}

.left {
  width: 180px;
  background: #aafed6;
}

.right {
  width: auto;
  background: #e8f6fe;
}

footer {
  width: 100%;
  background-color: #000;
  color: #fff;
  padding: 1em;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

查看jsfiddle - http://jsfiddle.net/jalenconner/be71229w/1/

此解决方案使用CSS Flexbox，您可以在此处了解更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

 html {
  position: relative;
  height: 100%;
}

body {
  height: 100%
}

.container {
  /* Full Height - height of footer*/
  height: calc(100% - 50px);
  display: flex;
  flex-direction: row;
}

.left {
  width: 20%;
  float: left;
  background: #aafed6;
  height: 100%;
}

.right {
  background: #e8f6fe;
  width: 80%;
}

footer {
  width: 100%;
  background-color: #000;
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
}
.footer-text {
  padding: 1em;
}

Answer 3

只需对身体标签进行一些调整即可修复它

*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
html {
  position: relative;
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

.container {
  height: inherit;
  overflow: hidden;
}

.left {
  width: 180px;
  float: left;
  background: #aafed6;
  height: calc(100% - 50px);/**deduct heght of footer**/
}

.right {
  float: none;
  /* not needed, just for clarification */
  background: #e8f6fe;
  /* the next props are meant to keep this block independent from the other 
floated one */
  width: auto;
  overflow: hidden;
}

footer {
  width: 100%;
  background-color: #000;
  color: #fff;
  padding: 1em;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

<body>
  <div class="container">

    <div class="left">
      left content fixed width
      <br>
      <br> I want this to extend to footer!
    </div>

    <div class="right">
      right content flexible width
      <br>
      <br> right content flexible width
      <br>
      <br> right content flexible width
      <br>
      <br> right content flexible width
      <br>
      <br> right content flexible width
    </div>

  </div>

  <footer>
    This is my footer.
  </footer>

</body>

Answer 4

html {
  position: relative;
}
body {
  margin-bottom: 40px;
}
html, body {
  height: 100%;
}
.container {
  overflow: auto;
  display: flex;
  min-height: 100%;
}
.left {
  width: 180px;
  background: #aafed6;
}
.right {
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}
footer {
  width: 100%;
  background-color: #000;
  color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
}

使用上面的 CSS 代码，您将获得具有固定页脚和100％高度内容的所需输出。

使div高度延伸到另一个div

4 个答案:

更新：