CODEWITHSUNDEEP
htmlcsspositioningfloating
user6200749
user6200749

Reputation:

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.

Upvotes: 0

Views: 89

Answers (3)

AlexPogue
AlexPogue

Reputation: 777

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>

Upvotes: 0

Allen McIntosh II
Allen McIntosh II

Reputation: 26

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

Upvotes: 0

c-smile
c-smile

Reputation: 27460

Try to use vh units there: 

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

Upvotes: 2

Related Questions