Q: Html floating, 100% height i am trying to make my website, but i have problem with size of screen. I want to make it bit responsive, and my layout is - header on top, then menu and footer, but its on 25% of width, and i dont know how to resize it to 100% height.I want it look like this: http://s32.postimg.org/9pa325s3p/img.png
My Code:
<header>header </header>
<section id="menu">menu</section>
<footer>footer </footer>

css code is not important.

A: Try to use vh units there: 
#menu {
  height: calc(100vh - 80px);
}


A: The simplest thing you can do is wrap the section and footer elements in a 'wrapper' div, or any other block level element (aside, section, nav, etc.) you like, like this:
<div ID="sidebar-wrapper">
    <header>header </header>
    <section id="menu">menu</section>
    <footer>footer </footer>
</div>

Once you do that, it's as simple as give the #sidebar-wrapper a height of 100% and width of 25%. And finally, give your menu and footer the desired heights as percentages.
#sidebar-wrapper {
  width: 25%;
  height: 100%;
}
section {
  height: 90%; 
}
footer {
height: 10%
}

Once that's done, your layout should be just as it is in the picture.
P.S: if you plan to have navigation links in that section element (which I imagine you do), you should use 'nav' instead to be more semantic :).

A: Here's a solution that should work in pre-CSS3 browsers.
The menu and footer are inside a wrapper div. The wrapper div gets height:100% and starts at the top of the page using margin-top:-40px. The wrapper div gets position:relative so that all elements inside are positioned relative to this container element.
For the menu, we position absolutely with top:40px so we don't overlap the header, and bottom:40px so we stop before the footer.
Footer styles are obvious - position:absolute with bottom:0 so we hit the bottom of the page. 
<style>
header {
    height:40px;
    background-color:yellow;
}
#menufootercontainer {
    position:relative;
    height:100%;
    margin-top:-40px;
    position:relative;
}
#menu {
    width:80px;
    position:absolute;
    top:40px;
    bottom:40px;
    background-color:green;
}
footer {
    width:80px;
    height:40px;
    position:absolute;
    bottom:0;
    background-color:red;
}
</style>

<header>header</header>
<div id="menufootercontainer">
<section id="menu">menu</section>
<footer>footer</footer>
</div>

