Every featured article with 100% browser height?

Hi,
I am using the Hot One Page template, and I want every featured article that shows in the front page to expand to the whole browser window. That is 100% width and 100% height of the window.
I can't manage to set the height to 100%.
After some googling I change the template_css.css and included the following:
html {
height: 100%;
}
body {
margin:0;
padding:0;
height:100%;
}

Inside the top article I have a div with the following style attributes:
<div style="width: 100%; height:100%; background-color: red;">
Hello World
</div>

But the article only occupies the required height to display its content...
See the following link:
fagaki.demos.my-portal.gr/demo4/

Can you help me?
Regards

You cant do that from css, here is script you can put add to bottom of: templates/hot_one_page/js/hot_onepage.js but I don't recommend it.


jQuery(window).resize(function(){
jQuery('.items-row .item').css('min-height', jQuery(window).height() + 'px');
});

jQuery(document).ready(function(){
jQuery(window).trigger('resize');
})

jQuery(window).load(function(){
jQuery(window).trigger('resize');
})

I've read about the "vh" metric in the height attribute
style="height: 100vh;" and I tried it, but they say it is not supported by all browsers/platforms.
But do you consider it a safer solution?

Regards

That works on all modern browsers so no reason to wait any more, it is here from 2011. I recommend always using backup styling:

width:768px;
width:100vw;

so if browser does not support vw it will use 768px