CODEWITHSUNDEEP
htmlcss
Rahul Kashyap
Rahul Kashyap

Reputation: 977

Why Footer is not coming in bottom?

Why footer is not coming in bottom in service page, here is the page link in which I'm in working on Service You can edit it or in the snippet code which i'm sharing.

It is working for the page below.

Note: I Don't want to use position:absolute or position:fixed here

body{
  background-color: #ddd;
  margin:0;
  padding: 0;
  font-family: Segoe UI;
}
ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
nav {
    background-color: #B53B27;
    width: 100%;
    z-index: 20;
}
ul.main-menu{
  text-align: center;
  align-items: center;
}
nav > ul.main-menu > li{
  display: inline;
}
nav > ul.main-menu > li > a{
  background-color: #B53B27;
  display: inline-block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  outline: none;
}
nav > ul.main-menu > li > a:hover{
  background-color: #8F2413;
}
.sticky-nav{
  position: fixed;
  top: 0;
  z-index: 10;
}
.cover {
    background: transparent url("http://snag.gy/TKyyO.jpg") repeat scroll 0% 0%;
    width: 100%;
    height: 580px;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);
}
hr {
    width: 850px;
    border: 1px solid #C6C6C6;
}
.content {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
}
.content h1 {
    color: #BD0F0F;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
.content p {
    color: #534949;
}
.registration {
    margin: 100px auto;
    width: 300px;
    text-align: center;
}
.registration h3 {
    color: #C90404;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
.registration > form > input[type="text"],
.registration > form > input[type="password"]{
    width: 90%;
    margin-bottom: 15px;
  }
.registration > form > input[type="submit"]{
  background-color: #B53B27;
  color:#eee;
  cursor: pointer;
}
.registration > form > input[type="submit"]:hover{
  background-color: #8F2413;
}
input{
    display: block;
    width: 100%;
    padding: 10px 15px;
    border-style: none;
    border-radius: 5px;
}
.img-container {
    height: 500px;
    width: 500px;
    margin: 100px auto;
    border-radius: 50%;
    background: transparent url("http://snag.gy/lKbJE.jpg") repeat scroll 0% 0%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);
}
.img-container a {
    position: relative;
    top: 240px;
    color: #fff;
    background-color:  rgba(255, 255, 255, 0.24);
    padding: 15px 25px;
    border: 2px solid #fff;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
    border-radius: 5px;
    outline: none;
}
.img-container a:hover {
  background-color: #eee;
  color: #000;
}
footer {
    background-color: #771302;
    color: #E0E0E0;
    padding: 14px 15px;
}
footer > p {
    width: 500px;
    display: inline;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Video of the week</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

</head>

<body>
<header>
    <div class="cover"></div>
    <nav id="nav-bar">
        <ul class="main-menu">
            <li><a href="#">Home</a></li>
            <li><a href="service.html">Service</a></li>
        </ul>
    </nav>
</header>
<div class="content margin-top-bottom">
    <h1>Talk of the Week</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut gravida turpis. Suspendisse in eros in porta ornare. Nunc quis vulputate ante, ac maximus ipsum. Integer sed urna sit amet tellus sollicitudin lobortis sit amet at ligula. </p>
</div>
<hr>
<div class="registration margin-top-bottom">
    <h3>Save your seat</h3>
    <form method="post" action="abc.html">
        <input type="text" placeholder="First Name">
        <input type="text" placeholder="Last Name">
        <input type="text" placeholder="Username">
        <input type="text" placeholder="E-mail">
        <input type="password" placeholder="Password">
        <input type="Submit" value="Hit-on">
    </form>
</div>
<hr>
<div class="img-container margin-top-bottom"><a href="#">Watch Now</a></div>
<div class="content margin-top-bottom">
    <h1>Talk of the Week</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut gravida turpis. Suspendisse in eros in porta ornare. Nunc quis vulputate ante, ac maximus ipsum. Integer sed urna sit amet tellus sollicitudin lobortis sit amet at ligula.</p>
</div>
<footer>
    <p>Copyright (c) 2015 Copyright Rahul Kashyap - All Rights Reserved.</p>
</footer>
</body>
</html>

here is the another page code snippet which I'm talking about

body{
  background-color: #ddd;
  margin:0;
  padding: 0;
  font-family: Segoe UI;
}
ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
nav {
    background-color: #B53B27;
    width: 100%;
    z-index: 20;
}
ul.main-menu{
  text-align: center;
  align-items: center;
}
nav > ul.main-menu > li{
  display: inline;
}
nav > ul.main-menu > li > a{
  background-color: #B53B27;
  display: inline-block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  outline: none;
}
nav > ul.main-menu > li > a:hover{
  background-color: #8F2413;
}
.content {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
}
.content h1 {
    color: #BD0F0F;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
.content p {
    color: #534949;
}
footer {
    background-color: #771302;
    color: #E0E0E0;
    padding: 14px 15px;
}
footer > p {
    width: 500px;
    display: inline;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Video of the week</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

</head>

<body>
<header>
    <nav id="nav-bar">
        <ul class="main-menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="service.html">Service</a></li>
        </ul>
    </nav>
</header>
<div class="content margin-top-bottom">
    <h1>Talk of the Week</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut gravida turpis. Suspendisse in eros in porta ornare. Nunc quis vulputate ante, ac maximus ipsum. Integer sed urna sit amet tellus sollicitudin lobortis sit amet at ligula.</p>
</div>
<footer>
    <p>Copyright (c) 2015 Copyright Rahul Kashyap - All Rights Reserved.</p>
</footer>
</body>

</html>

Upvotes: 1

Views: 96

Answers (4)

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

Applying min-height to content is a solution. But applying this min-height through css file is not preferable because we have to consider a wide range of screen sizes. So using jquery, we can find the height of the window. Then

min height for content section = window height - ('header height' + 'footer height' + top and bottom margins of content)

inject this value as min-height to the div with class 'content'.

Upvotes: 0

Jinu Kurian
Jinu Kurian

Reputation: 9426

If you don't want to use the position: fixed or absolute, then calc function is the solution.

.content {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
    min-height: calc(100vh - 290px); // calculate the height (/* IE 9+, Fx 16+, Ch 26+ */)
}

Add this in your css. Its responsive !!

What I have done here is just add the height of footer, header and margins ( 41px + 49px + 100px + 100px )and subtract it from the viewport height (100vh).

body{
  background-color: #ddd;
  margin:0;
  padding: 0;
  font-family: Segoe UI;
}
ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
nav {
    background-color: #B53B27;
    width: 100%;
    z-index: 20;
}
ul.main-menu{
  text-align: center;
  align-items: center;
}
nav > ul.main-menu > li{
  display: inline;
}
nav > ul.main-menu > li > a{
  background-color: #B53B27;
  display: inline-block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  outline: none;
}
nav > ul.main-menu > li > a:hover{
  background-color: #8F2413;
}
.content {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
    min-height: calc(100vh - 290px); // calculate the height (/* IE 9+, Fx 16+, Ch 26+ */)
}
.content h1 {
    color: #BD0F0F;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
.content p {
    color: #534949;
}
footer {
    background-color: #771302;
    color: #E0E0E0;
    padding: 14px 15px;
}
footer > p {
    width: 500px;
    display: inline;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Video of the week</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

</head>

<body></body>
<header>
    <nav id="nav-bar">
        <ul class="main-menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="service.html">Service</a></li>
        </ul>
    </nav>
</header>
<div class="content margin-top-bottom">
    <h1>Talk of the Week</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut gravida turpis. Suspendisse in eros in porta ornare. Nunc quis vulputate ante, ac maximus ipsum. Integer sed urna sit amet tellus sollicitudin lobortis sit amet at ligula.</p>
</div>
<footer>
    <p>Copyright (c) 2015 Copyright Rahul Kashyap - All Rights Reserved.</p>
</footer>


</html>

Upvotes: 1

blurfx
blurfx

Reputation: 1360

You should use position:absolute or position:fixed because content height isnt enough to fill screen.

I hope this pen will help you.(not mine)

edit:

I forgot about css calc you can do that without position:absolute|fixed

.content {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
    height: calc(100% - 41px - 49px - 200px);
    /* page height - header height - footer height(include margin) - content height(exclude margin) */
}

Upvotes: 0

Albert Stepanyan
Albert Stepanyan

Reputation: 1

why don't you write your content in a tag???? here is your code try write all in a 

       <body></body>
         <header>
<nav id="nav-bar">
    <ul class="main-menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="service.html">Service</a></li>
    </ul>
</nav>

Upvotes: 0

Related Questions