底部对齐浮动div。 （ 图片 ）

Question

这在我看来似乎很简单..但事实并非如此。我有2个div。漂浮在彼此旁边 正确的div应该有一个始终坚持页脚

的图像

它甚至没有应用我的.block div的100％高度，父div（正文）也设置为100％

出于某种原因，这不适用于我的以下代码。

JSFIDDLE

HTML

<div class="header">
    Header
</div>

<div class="block">
    <img src="http://www.zwaldtransport.com/images/placeholders/placeholder1.jpg" />
</div>

CSS

body {
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%;   
    background: url('background.jpg') no-repeat center center fixed;
    background-size: cover;
}


.header {
    float: left;
    height: 100%;
    width: 40%;
    background: red;
}

.block {
    float: left;
    width: 60%;
    height: 100%;
    background: green;
}

.block img {
    max-width: 100%;
}

Answer 1

你可以试试这个。检查并告诉我，你有没有要求：

.header {
height: 100%;
width: 40%;
background: red;
}

.block {
position:absolute;
bottom:0;
width: 60%;
height: auto;
background: green;
}