How to make the section and aside touch the footer?


Tags: html,css,css3,responsive-design

Problem :

I got my footer to touch the bottom of the page all time by using the following css

 footer {
      width: 100%;
      bottom: 0;
      position: fixed;        
 }

Now I want to know how to make the section and aside touch the top of the footer at all times. I am using the following as style directives for the section and aside.

 section {
     float: left;
     background-color : red;
     width : 80%;

     }

aside{
      width : 20%;
      float : left;
      background-color : green;
    }

If I give height some particular pixel value it will not render correctly in some other screen size. What should I use in addition so the height is responsive and covers the area from header to footer all the time in all the various sizes of screen, wherever the page is going to be rendered? Any hint which will help me come out of this will be highly appreciated.



Solution :

These are based upon the Aside being 20% width and the Footer being 20% height. You can adjust accordingly. For the scrolling one, just remove the height attributes to allow it to be dynamic, but I would put a min-height:80%; on them just in case :). You don't need any of these silly wrappers ;).

Non-Scrolling

position:fixed; all elements and lay them out using top, left, right and bottom percentages to suit.

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
footer {
    width: 100%;
    bottom: 0;
    position: fixed;
    top:80%;
    background-color:orange;
}
section {
    position: fixed;
    top:0;
    left:20%;
    right:0;
    bottom:20%;
    background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
}
aside {
    position: fixed;
    top:0;
    left:0;
    right:80%;
    bottom:20%;
    background: linear-gradient(to bottom, rgba(241,218,54,1) 0%,rgba(254,252,234,1) 100%);
}
<aside></aside>
<section></section>
<footer></footer>

Scrolling

Add padding-bottom to the aside and section of the same value as the height of the footer.

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
footer {
    width: 100%;
    bottom: 0;
    position: fixed;
    top:80%;
    background-color:orange;
}
section {
    float: left;
    background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
    width : 80%;
    height:100%;
    padding-bottom:20%;
}
aside {
    width : 20%;
    float : left;
    height:100%;
    background: linear-gradient(to bottom, rgba(241,218,54,1) 0%,rgba(254,252,234,1) 100%);
    padding-bottom:20%;
}
<aside></aside>
<section></section>
<footer></footer>


    CSS Howto..

    How to change Fancybox preloader image?

    Show popup after page load

    how can I hide empty cells in a table with bootstrap 3

    How to use particular CSS styles based on screen size / device

    CSS: how to keep image never modified with same “offset” all the time?

    How to make hover using jquery without CSS?

    How can I do this menu using list and css?

    Can someone explain or show how to combine a bootstrap 3 collapsing top nav and and offcanvas side nav?

    How to draw heart using HTML/CSS table?

    How to toggle fade a DIV when hovered over an image

    How do I remove a CSS class from a jqGrid cell?

    How to shift a background image with css

    how to replicate pinterest.com's absolute div stacking layout [closed]

    How to get rid of white space between round image and border in HTML/CSS/Bootstrap?

    How can i make it through using bootstrap grid?

    How to make an svg masked image compatible with Internet Explorer

    How can I stop a text link to go up each time it is selected?

    Developer Tools: How can I quickly check the difference in styles between normal state and :focus?

    How to CSS Img Border on Hover without Shifting Image

    How can a

    How to add dynamic CSS style sheet for single xhtml file

    how to have custom css overrule bootstrap

    How to declare a div in @page @top-left

    PHP / CSS How to work with themes for my site? [closed]

    How do I position a Silverlight Control

    CSS: how to remove the indent of list items shown in Firefox

    How to center the boxes as shown?

    How to make a webpage mobile friendly with css media queries

    How to fit the title to the entire page

    HTML/CSS How to make a menu closed and then use class=“active”