html - 底部对齐一个 float 的 div。 ( 图像 )

Question

这在我看来似乎很简单……但事实并非如此。我有 2 个分区。漂浮在彼此身边正确的 div 应该有一张图片始终贴在页脚上

它甚至没有应用我的 .block div 的 100% 高度，父 div ( body ) 也设置为 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;
}