Question

我想将页脚保持在浏览器底部，直到内容填充到正文高度为止。让其内容框为空。

什么是正确的方法？

这是我的尝试：

SCSS：

.wrapper.container-fluid{
    padding:0;
    margin: 0;
    border:2px dashed red;
    display: flex;
    flex-direction:column;
    height: 100%;
    max-height:inherit;

    header{
        border: 1px  solid blue;
    }

    div.content{
        border:1px solid gray;
        display: flex;
        flex-direction:row;
        height: 100%;

        .leftnavi{
            border:1px solid gray;
            width: 20%;
            background:lightgray;
        }

        .rightContent{
            border: 1px solid red;
            max-width: 100%;
            width: 100%;
            background:lightgreen;
        }

    }

    footer{
        border: 1px solid green;
    }
}

html：

<div class="wrapper container-fluid">

    <header>
        <h2>Header title goes here</h2>
    </header>

    <div class="header-navi">
        Header navi goes here
    </div>

    <div class="content">
        <div class="leftnavi">
            I am left navi
        </div>
        <div class="rightContent">
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quod labore distinctio nulla delectus, recusandae officiis at. Earum accusamus ea, sed dignissimos. Voluptatem, exercitationem! Dignissimos porro labore vel velit beatae.</div>

        </div>
    </div>

    <footer>Footer goes here</footer>

</div>

Answer 1

第一步是将容器的min-height设置为100vh。 4px是由于您的2px边框（2px顶部，2px底部）造成的。

.wrapper.container-fluid {
  …
  border: 2px dashed red;
  min-height: calc(100vh - 4px);
}

最后一步设置为flex-grow: 1到主要内容部分。页脚始终位于页面底部（如果内容要求滚动，则页脚始终位于页面底部）。

div.content {
   …
  flex-grow: 1;
}

演示

.wrapper.container-fluid {
  padding: 0;
  margin: 0;
  border: 2px dashed red;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: inherit;
  min-height: calc(100vh - 4px);  /* Added */
}
.wrapper.container-fluid header {
  border: 1px solid blue;
}
.wrapper.container-fluid div.content {
  border: 1px solid gray;
  display: flex;
  flex-direction: row;
  height: 100%;
  flex-grow: 1; /* Added */
}
.wrapper.container-fluid div.content .leftnavi {
  border: 1px solid gray;
  width: 20%;
  background: lightgray;
}
.wrapper.container-fluid div.content .rightContent {
  border: 1px solid red;
  max-width: 100%;
  width: 100%;
  background: lightgreen;
}
.wrapper.container-fluid footer {
  border: 1px solid green;
}
body {
  margin: 0;
}

<div class="wrapper container-fluid">

  <header>
    <h2>Header title goes here</h2>
  </header>

  <div class="header-navi">
    Header navi goes here
  </div>

  <div class="content">
    <div class="leftnavi">
      I am left navi
    </div>
    <div class="rightContent">
      <div>Lorem ipsum dolor sit amet</div>

    </div>
  </div>

  <footer>Footer goes here</footer>


</div>

jsFiddle

Answer 2

在您当前的小提琴中使用此CSS

footer{
    border: 1px solid green;
    position: absolute;
    bottom: 0;
    width: calc(100% - 16px);
    margin: 0;
}

如何保持页脚在底部，直到内容充满身体高度？

2 个答案: