Not showing header footer at the same time

Hi All:

I created a simple sticky header and footer. When I include header footer both in the page only header shows. I need the footer to show as well.

Please let me know the correction in the code sample below:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<style>
html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

body {
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 20px 0 0 0;
}
footer {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}

header {
  background: #42A5F5;
  color: white;
    line-height: 50px;
  padding: 0 20px;
}
</style>


<body>
<header class="header">
  header
</header>

<div class="content">
  <div class="content-inside">
    <h1>Sticky Header with Negative Margin 2</h1>
  </div>
</div>

<footer class="footer">
  Footer
</footer>
</body>
</html>

Best Regards,

Sunnybrad
sunnybradAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Slick812Commented:
greetings sunnybrad , , , , PLEASE always dis palay code in an EE CODE section that you get with a CODE button at the top of the text-box input.

 I looked at the HTML code you gave, and then tried it in a browser, and It did not look to me to be a good use of CSS display. First There is NOTHING that is "Sticky" about the header that I can tell, it seems to be a blue block display.
There may be some other ways to get a display as you want? ? ? But you need to see that when you have elements on a page, that the elements above, below, and on either side has an effect on the SIZE and POSITION of other elements, and the Container elements for the things you are working with, Since you have trouble with the "Footer", you do not seem to realize that setting the height of the -
   <div class="content">
to a minimum of 100% does NOT compensate for the <header> and <footer> height that are OUTSIDE of the <div class="content">  element. so the display is always 100% Plus 100 pixels ( 50 each for head and foot). So I moved the head and foot to inside the the <div class="content"> and let it stay at 100% height. I used the position Absolute, on the footer to get it "Sticky" at the bottom. However this creates other problems with the footer "Covering" content, So I had to have a padding bottom of 50 px on the <div class="content">, but this caused other problems, and I had to move the <div class="content"> up with a
    margin-top; -50px;
and give the header a 50px top margin - below is the code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<style>
html, body {
  height: 100%;
  margin: 0;
}
body {
  font: 16px Sans-Serif;
}
.content {
position: relative;
min-height: 100%;
padding-bottom: 51px;
margin-top: -50px;
box-sizing: border-box;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
box-sizing: border-box;
}
.header {
margin-top: 50px;
}

h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 20px 0 0 0;
}
footer, header {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}

</style>

</head>
<body>
<div class="content">
<header class="header">
  header
</header>
  <div class="content-inside">
    <h1>Sticky Header with Negative Margin 2</h1>
  </div>
  <p>More content<br />Other content</p><p>More content<br />Other content</p><p>More content<br />Other content</p><p>More content<br />Other content</p><p>More content<br />Other content</p><p>More content<br />Other content</p>
  
<footer class="footer">
  Footer
</footer>
</div>
</body>
</html>

ALSO there is nothing Responsive in your HTML-CSS, and today all pages need to be responsive, 

ask questions if you need more

Open in new window

0
Slick812Commented:
I looked at another of your questions, and From that it sounds to me that you want what in CSS is a Fixed Header and Footer, , so I changed the CSS for your page, and made the header and footer a    position: fixed;   and I made the  "content" to NOT be  min-height: 100%; because that 100% height has effects that I do not think are needed for this. AND, In cell phones, as a landscape view, with just 400px or so in height view, the use of a Fixed footer really decreases the page view, so I reduced the height of the header and footer to 45px, since, as you have them they have only one word of content.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<style>
html, body {
  height: 100%;
  margin: 0;
}
body {
  font: 16px Sans-Serif;
}
.content {
padding: 44px 0;
}
.content-inside {
padding: 10px 20px;
background: #cfc;
max-width: 55em;
margin: 0 auto;
}
.footer {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 45px;
box-sizing: border-box;
}
.header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 45px;
box-sizing: border-box;
}

.header em{
display: block;
width: 25px;
float:right;
margin-top: 10px;

cursor: pointer;
}

.header em div {
margin: 4px 0;
border-top: 3px solid #fff;
}

h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 20px 0 0 0;
}
footer, header {
  background: #42A5F5;
  color: white;
  line-height: 45px;
  padding: 0 20px;
}

</style>

</head>
<body>
<div class="content">
<header class="header">
  header<em><div></div><div></div><div></div></em>
</header>
  <div class="content-inside">
    <h1>Sticky Header and Footer</h1>
  
  <p>More content<br />Other content</p><p>More content<br />Other content</p><p>More content<br />Other content</p><p>More content<br />Other content</p><p>More content<br />Other content</p><p>More content<br />Other content</p>
  </div>
<footer class="footer">
  Footer
</footer>
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Slick812Commented:
Question is Inactive and Must be closed.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.