How to set header and footer in css?

Question

I want to set header fixed at the top and footer at the botom of the page.

Image:

index page code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Home</title>
          <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
          <link href="custom.css" rel="stylesheet" type="text/css">
        </head>

        <body class="bodyy">

          <div class="container-fluid form">
              <div class="row">
                <div class="col-md-12 llg">
                <img src="image/my-site-planner-logo.png" class="logo" />
              </div>
            </div>
          </div> <!--container ends-->

          <div class="container">
              <div class="row">
              <div class="col-md-3">
              </div>
                  <div class="col-md-6">
                      <form method="post" action="" class="formt">
                          <div class="form-group">
                              <input class="form-control" required="required" placeholder="Enter Email" id="name" name="name" type="email"/>
                          <br />
                    <input class="form-control" id="email" required="required" placeholder="Enter Password" name="password" type="password"/>
                        <br />
                              <button class="btn btn-primary bbt" name="submit-" type="submit">
                              Sign Me In
                            </button>
                      <p class="text-center ttr">
                        Want to Register a New User ?
                      </p>
                    <button class="btn btn-primary bbt" name="submit-" type="submit">
                                <a href="sign-up.html" class="tbb"> 
                        Create Account 
                      </a>
                            </button>
                  </div>
                      </form>
                  </div>
              <div class="col-md-3">
              </div> 
            </div> <!--row ends-->
            </div> <!--container ends-->

          <div class="footer form">
                <h4>
                  &copy; 2016 My Site Planner | All Rights Reserve
                </h4>
              </div>
            </div>
          </div> <!--container ends-->


          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

          <script src="js/bootstrap.min.js"></script>
          <body oncontextmenu="return false">
        </body>
      </html>

css code:

body{
    margin: 0 auto;
    background-image: url("white-background-1.jpg");
    background-size: 100px 100px,
    background-repeat: no-repeat;
}
.ul{

list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;


}
.container{
    width:  400px;
    height: 400px;
    text-align: center;
    background-color: rgba(0, 255, 255, 0.5);
    border-radius: 4px;
    margin: 0 auto;
    margin-top: 150px;

}



.footer .form {
        margin-top: 100px;
}



table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

I tried to change the code by .footer .form as position absolute and header is scrolling. Please can someone help me?

Possible duplicate of [How to make this Header/Content/Footer layout using CSS?](http://stackoverflow.com/questions/7123138/how-to-make-this-header-content-footer-layout-using-css) and http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height — Issam El-atif, Nov 15 '16 at 11:39
I think you are using bootstrap in a wrong way, specially giving width to bootstrap's container class. It will mess up your design on later stages. — Aslam, Nov 15 '16 at 11:39
Yes, @hunzaboy. It's downloaded project and my boss has given us thr project to work on it. What can i do do. My mind got flipped. :( — , Nov 15 '16 at 11:43

score 2 · Answer 1 · answered Nov 15 '16 at 11:42

2

As I can see you are using Bootstrap you could use one of its templates.

Take a look at this one:

http://getbootstrap.com/examples/sticky-footer-navbar/

Another point about your code, its not suposed to be a good practice modify directly the container class since its a Bootstrap basics.

Hope this helps,

Regards

answered Nov 15 '16 at 11:42

Borja Alvarez

189
13

Yes, any changes i made to my property, no changes to layout. – Nov 15 '16 at 11:46

Mandeep Thakur · Answer 2 · 2016-11-15T11:46:44.350

0

.footer .form {
        margin-top: 100px;
        position:fixed;
        bottom:0px;
}

replace this code to fix your footer

edited Nov 15 '16 at 11:46

answered Nov 15 '16 at 11:39

Mandeep Thakur

655
1
10
23

it didn't help me. – Nov 15 '16 at 11:44
@Warda i have made some amendments please check it out. – Mandeep Thakur Nov 15 '16 at 11:47

score 0 · Answer 3 · answered Nov 15 '16 at 11:47

0

I'm not an expert but you could try using:

Position: fixed;

Or

Position: bottom;

Hope this helps!

answered Nov 15 '16 at 11:47

How to set header and footer in css?

3 Answers3