Question

我有类似的问题，可以找到here。但我无法使其发挥作用，或者我完全不了解它。

我试图解决的问题是 - 即使没有足够的内容显示，我希望我的内容背景能够达到页脚。我创建了一个简单的小提琴，可以找到here。正如您所看到的，内容和页脚之间没有足够的内容可以达到页脚。我想把那个空间变成灰色。

HTML：

<div class=blue>header here</div>
<p>LOGO here</p>
<div class="blue">navigation bar here</div>
  <div class="content">
No content.
  </div>
<div class="footer">footer is here</div>

CSS：

.blue {
    color: #ffffff;   
    background-color: #294a70;
    display: block;
    float: none;
    width: 400px;
    margin: 0 auto;
    text-align: center;
}
p {
   text-align: center;
   color: #ffffff;
   }
.content {
    background-color: #e6e6e6;
    display: block;
    float: none;
    margin: 0 auto;
    overflow:hidden;
    width:400px;
    margin-bottom:30px; 
}
.footer {
    color: #ffffff;   
    background-color: #294a70;
    display: block;
    float: none;
    width: 400px;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:30px;
}
body {
    margin:0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
    font-size: 14px;
    overflow-x:hidden;
    background-image:url('http://www.planwallpaper.com/static/images/Alien_Ink_2560X1600_Abstract_Background_1.jpg');
    min-height: 100%;
}
html {
    position:relative;
    min-height: 100%;
}

所有帮助将不胜感激！

Answer 1

使用CSS3 calc()功能

诀窍是，如果你知道标题的高度和＆amp;页脚，您可以将此功能与 vh 单位一起使用，100vh可以为您提供屏幕高度，只需减去听众的高度即可。它的页脚。

E.g。

如果标题为80px＆amp;页脚是40px，即总共120px，然后使用

.content{
    min-height: calc(100vh - 120px);
}

使用min-height的目的是，如果内容不存在则应用至少此高度，但如果内容多于屏幕，则div会相应地扩展以适应。

更新了JSFiddle：

https://jsfiddle.net/vj07e8g1/5/

Answer 2

您可以尝试使用flexbox布局：

<强> HTML

<body>
    <header></header>
    <main class="content"></main>
    <footer></footer>
</body>

<强> CSS

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main.content {
    flex: 1;
}

查看此代码集示例：http://codepen.io/StefanBobrowski/pen/zZXXWy

Answer 3

您可以将其添加到您的内容样式中：

min-height:400px;

它会推动页脚一点点，但它会完成这项工作。

希望这是你正在寻找的。

Answer 4

最简单的当代方式，取决于您的浏览器支持要求，将使用CSS网格，它允许您定义行和列，并将特定内容分配到特定位置（由grid-row和{grid-column放置{1}}），如下所示：

＆＃13;

html,
body {
  height: 100%;
}
/* to force all elements to be sized including
   their padding and border-widths */
body,
::before,
::after {
  box-sizing: border-content;
}

body {
  /* To use CSS grid, forcing the child elements of
     the <body> element to adopt 'display: grid-item': */
  display: grid;

  /* defining the three columns of the grid, the first and
     third being equal fractions of the space left over after
     the second (middle) column's width of 400px is calculated */
  grid-template-columns: 1fr 400px 1fr;

  /* reducing the first three rows to the minimum height needed
     to fully display their content, setting the fourth row
     to take up the remaining unoccupied space once the other
     heights are calcuated and setting the final row's height to
     30px: */
  grid-template-rows: min-content min-content min-content 1fr 30px;
  height: 100vh;
  background-image: url(https://i.stack.imgur.com/2oC8H.jpg);
}

body>* {
  /* setting all the child elements of the <body> to be placed
     in grid-column 2 (the central 400px-wide column): */
  grid-column: 2;
}

/* Setting the default shared styles of the .blue elements: */
.blue {
  color: #ffffff;
  background-color: #294a70;
}

.blue.header {
  /* positioning this element in the first (one-based counting)
     row: */
  grid-row: 1
}

body>p {
  grid-row: 2;
}

.blue.navigation {
  grid-row: 3;
}

div.content {
  grid-row: 4;
  /* background-color purely to show that the space of the
     div.content element occupies the full space available: */
  background-color: #ffa;
}

div.footer {
  grid-row: 5;
}

＆＃13;

<div class="header blue">header here</div>
<p>LOGO here</p>
<div class="blue navigation">navigation bar here</div>
<div class="content">
  No content.
</div>
<div class="footer">footer is here</div>

＆＃13;

JS Fiddle

请注意，我确实为.blue元素添加了一个类名，以便更容易根据文档中的角色区分它们，并在将它们放入文档时相互区分。 / p>

填写内容背景，直到它到达页脚

4 个答案: