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

Question

This seemed simple in my head.. But it's not. I have 2 div's. floating next to eachother The right div should have an image that is always sticking to the footer

It's not even applying the 100% Height of my .block div, the parent div ( body ) is also set at 100%

For some reason this is not working with my following code.

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

You can try this. check and let me know, have you asked for this:

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

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