填充内容背景直到它到达页脚

我也有类似的问题，可以找到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%; 
}

所有帮助将不胜感激！

来源

2017-04-05 RebelInc

使用CSS3 calc()功能

诀窍是，如果你知道头&页脚的高度，您可以使用该功能VH单位，100vh为您提供了屏幕高度，只是。减去夏理&的高度页脚从它。

E.g.

如果标题是80px &页脚是40像素，即，总共120像素，然后使用

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

使用最小高度的目的是，如果内容不存在，则ATLEAST施加这个高度，但如果有比屏幕更多的内容，然后div被扩展以适应相应的内容。

更新的jsfiddle：

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

来源

2017-04-05 18:56:58 demonofthemist

我曾经在读过关于vh单元的一些内容，但并不理解它们，你只是简单地将它和我的例子设法在我的网站上实现它。所以谢谢你解决这个问题给我。 – RebelInc

-1

您可以添加到您的内容风格：

min-height:400px;

这将推动页脚一点，但它会做的工作。

希望这是你在找什么。

来源

2017-04-05 18:42:36

钍为答复，但它不会做这项工作。无论屏幕大小如何，我都需要扩展内容背景。 – RebelInc

-1

最简单的现代方式，这取决于你的浏览器支持的要求，是使用CSS网格，它允许您定义的行和列，并指定特定内容是在特定的地方（位于由grid-row和grid-column），象如下：

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; 
 
}

<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>

JS Fiddle。

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

来源

2017-04-05 19:19:38

作为网格布局的坚定仇敌，我几乎不把这称为最简单的当代方式。意见无论如何。 Flexbox ftw加上它实际上是支持 – StefanBob

嗯，我不明白你对布局技术的仇恨，它简化了其他复杂的布局创建，但是至少要花时间来解释:)我选择不去的原因flex-box是flex模型固有的一维方法（当然，两维可以与嵌套一起使用），而网格提供简单的（对于给定值的“简单”）二维布局。仍然：ymmv等:) :) –

你选择使用CSS网格，因为它在2方向上更好。但是这个布局问题显然是单向的：垂直的。嘿，每个人都有自己的想法，但引导程序混淆了类名和所有需要你的CSS网格答案的解释，人们可能会理解我的仇恨是为了使flexbox中的简单变得复杂。他显然不是经验最丰富的编程人员，只是跳入CSS网格。你似乎很喜欢它，所以也许我会更深入地了解一下，但这不会很快得到支持http://caniuse.com/#feat=css-grid – StefanBob

你可以尝试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; 
}

看看这个codepen例如：http://codepen.io/StefanBobrowski/pen/zZXXWy

来源

2017-04-05 19:23:39 StefanBob

填充内容背景直到它到达页脚

回答

相关问题