Simple responsive html height issue

StackOverflow https://stackoverflow.com/questions/21523432

  •  06-10-2022
  •  | 
  •  

Question

i'm creating a simple responsive html template with only 3 rows, header, body, footer and images for footer and header, as well as background image for body. Now my footer isn't fixed on the bottom, i would like my max height to be 1024px.

Here's an image how it's supposed to look: enter image description here

And here's what i've got: enter image description here

I have no idea what is wrong with my code... I've tried many combinations of css.

Here's my full code:

<!doctype html>
<html>
<head>
    <title>Put your title here</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 1024px; 
      background-image: url(landing-page3.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.wrapper {
height: 100%;
}
.main {
height: 70%;
}
.header {
height: 15%;
}
.footer {
height: 15%;
}
    </style>
</head>
<body>
<div id="wrapper" class="wrapper">
<div id="header">
<img src="headerf.png" style="width:100%;">
</div>
<div id="main">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="footer">
<img src="footer.png" style="width:100%; position: absolute; bottom: 0;">
</div>
</div>
</body>
</html>
Was it helpful?

Solution

Problem you have set footer as # (id) in html but in css, you have defined it as a .(class)

you css says :

.footer {
   height: 15%;
}

your html says

<div id="footer">

Solution :

.wrapper {
    height: 100%;
    border:1px solid red;
    position:relative /* added */
 }
 #footer {
    position:absolute; /* added */
    height: 15%;
    bottom:0; /* added - fix to bottom */
    left:0; /* added -for full width */
    right:0; /* added -for full width */
}

Also,in you html,body you have set max-height but not height, so height of parent elemt of wrapper is not defined, so it doesn't inherit 100% of browser height

 html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        max-height: 1024px;
        height: 100%;/*missing*/
        background-image: url(landing-page3.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

demo

EDIT

Rather then placing img in footer....set it as background

     #footer {
         min-height: 15%; /* will wrap content if it higher than 15% :) */
         width:100%;
         background-image: url(http://www.smarthosting.rs/footer.png);
         background-repeat: no-repeat;
         background-size: 100% 100%;
     }

demo

OTHER TIPS

I think what you are looking for is a sticky footer. It is explained clearly in Chris Coyer - Sticky Footer example. Use and adapt to the way you want it. Hopefully, this article will help you.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top