Html floating, 100% height

Question

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.

make html body height 100% see here http://stackoverflow.com/questions/13609531/how-can-i-make-a-div-100-of-window-height — Ismail Farooq, May 08 '16 at 16:14
I need to set height of header(40px)+menu(?)+footer(40px) to 100%. — , May 08 '16 at 16:17

score 2 · Answer 1 · answered May 08 '16 at 16:20

2

Try to use vh units there:

#menu {
  height: calc(100vh - 80px);
}

answered May 08 '16 at 16:20

c-smile

26,734
7
59
86

1

This will work in most but not all browsers. See this [usage table](http://caniuse.com/#feat=viewport-units) – AlexPogue May 08 '16 at 17:06

score 0 · Answer 2 · answered May 08 '16 at 16:32

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 :).

AlexPogue · Accepted Answer · 2016-05-08T16:54:02.603

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>

Html floating, 100% height

3 Answers3