Layout (HTML5 + CSS)

Question

I'm having a small issue with my code . I'm trying to code after a long time and forgot a few basics. I'm trying to create a simple html layout .

As you will also see in the pictures , i'm getting another issue where the page is slightly longer than i expected and its showing the slider to move up and down . I didn't want this unless the page content is longer than expected (wrap) .

The top will remain fixed all the time . the footer will move based on the length of the content or stay fixed at the bottom if the content(wrap) is small.

What i'm expecting:

exp

What i'm getting (without top):

exp

with top :

exp2

HTML layout :

<!DOCTYPE html>
<html lang="en">

    <head>

        @include('layouts.includes.head')

        <link href="{{ asset('/css/style.css') }}" rel="stylesheet">

    </head>

    <body>

        <div id ="top">

        <div>

        <div id = "wrap">

        </div>

        <footer>

        </footer>

    </body>




</html>

CSS :

html,body 
{
  height: 100%;
  background-color:red;
}

#top {
  height: 50px;
  height: auto;
  margin: 0 auto -50px;
  background-color: yellow;
  width:auto;
}

#wrap {
  min-height: 100%;
  height: auto;
  margin: 0 auto -50px;
  background-color: blue;
  width:auto;
}

footer {
  height: 50px;
  background-color: black;
}

I notices 2 issues, the <div id="top> doesn't close and also in the CSS you have for #top both height:50px; and height:auto;. If these issues are also in your code they might cause your problem. — Tasos K.
– Tasos K., Commented Jun 10, 2015 at 8:51

lugreen · Accepted Answer · 2015-06-10 08:51:53Z

2

Fix the footer to the bottom of the page and give the wrap element a bottom margin of the height of the footer so the footer will never overlap the wrap div.

#wrap {
  min-height: 100%;
  height: auto;
  margin: 0 auto 50px auto;
  background-color: blue;
  width:auto;
}

footer {
  height: 50px;
  background-color: black;
  position:absolute;
  bottom:0;
  left:0; 
}

answered Jun 10, 2015 at 8:51

lugreen

1021 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

G.L.P · Accepted Answer · 2015-06-10 08:52:37Z

2

Try like this: Demo

html, body {
    height: 100%;
    background-color:grey;
    position:relative;
}
#top {
    height: 50px;
    height: auto;
    margin: 0 auto;
    background-color: yellow;
    width:auto;
    position:fixed;
    display:block;
    top:0;
    left:0;
    right:0;
}
#wrap {
    min-height: 100%;
    height: auto;
    margin: 50px auto 0 auto;
    background-color: blue;
    width:auto;

}
footer {
    height: 50px;
    background-color: black;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
}

answered Jun 10, 2015 at 8:52

G.L.P

7,2075 gold badges27 silver badges43 bronze badges

4 Comments

Jimmy Over a year ago

Aha , its working :) tho i'm still getting the slider to move up and down

G.L.P Over a year ago

dont you need scroll if there is no content?

Jimmy Over a year ago

Ah , i set the height for html,body to auto and it fixed the issue. I'm not sure if its the best way tho or will cause other issues down the line

Jimmy Over a year ago

There's a small issue with the demo . I tried adding a long content and it does not work as intended . 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1

kAy_4337270 · Accepted Answer · 2015-06-10 09:13:35Z

0

Try this code here

Header and footer would be fixed only the content would be scroll.
If there is no content the layout will be fitted as per the window resolution. the scroller would be disable till then.

answered Jun 10, 2015 at 9:13

kAy_4337270

2,5013 gold badges14 silver badges16 bronze badges

Collectives™ on Stack Overflow

Layout (HTML5 + CSS)

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related