CODEWITHSUNDEEP
css
alexp2603
alexp2603

Reputation: 365

Putting footer bottom of page through 100% height

I am trying to create a footer for my page. I have tried to make it stick at the absolute bottom of the page and after some online research it told me to modify the height value of my body. However, once I do that, nothing changes. Here is my code:

    *{
margin:0;
padding:0:
}

html{
    height:100%;
    min-height:100%;
}

#wrapper{
    height: 100%;
}

/*****************/
/*****HEADER******/
/*****************/



#header{

    width: 100%;

    margin-top:0px;
    margin-bottom:2.5%;
    margin-right:0px;
    margin-left:0px;

    padding-top:2%;
    padding-bottom:0.5%;
    padding-left:0%;
    padding-right:0%;

    border-bottom-style:solid;
    border-bottom-color: black;

    background: lightgrey;
}

#header>h1{
    color:black;
    margin: 0px 0px 0px 10px;
}

#header>p{
    font-style: italic;
    text-align: left;
    color:black;
    margin: 0px 0px 0px 20px;
}

/*****************/
/*****Body******/
/*****************/

#content{

    position: relative;

    height:100%;
    min-height: 100%;
    max-height: 100%;
}


#content>p{
    margin-left:2.5%;
}

#intro_text{
    font-style: italic;

    margin-bottom:2.5%;
}

#main_nav{
    margin-top:1%;
    margin-left:5%;
}




/*****************/
/******FOOTER*****/
/*****************/

#footer{

    font-style: italic;
    text-align: center;
    position: relative;

    bottom: 0;

}

EDIT: Added HTML

<!DOCTYPE html>
<html>


<head>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="./css/main.css">
     <script src="./js/script.js"></script>
</head>

<body>



    <div id="wrapper">

        <div id="header">
            <h1>My Web Space</h1>
            <p> First HTML Page using Sublime Text</p>
        </div>



        <div id="content">

            <p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>


            <p>Links to various test pages I am working with</p>
            <ul id=main_nav>
                <li><a href=test_link.html>Linking to another page test</a></li>

            </ul>

        </div>

        <div id="footer">
            <p id=footer_text>Me, 2016</p>
        </div>

    </div>

</body>


</html>

Upvotes: 0

Views: 3277

Answers (3)

Mihailo
Mihailo

Reputation: 4917

This is the core logic of the solution:

html{
  position: relative; /* Allows the footer to notice content height */
  min-height: 100vh;  /* My page will always take the full screen */
}

main{
  margin-bottom: 100px; /* prevents footer overlap (footer height + 20px) */
}

footer{
  position: absolute; /* I don't care about other things */
  bottom: 0; /* I want to be on the bottom... */
  left: 0;   /* ...and to the left */
}

JSBin

I tried to keep it as simple as possible.

  • This answer does not use flexbox its pure ol' css.

Upvotes: 1

pol
pol

Reputation: 2701

Using flexboxes, you can extend the content area to fill the wrapper

JSfiddle: jsfiddle.net/sabgu8r4

body {
  height: 100%;
}

/*****************/

* {
  margin: 0;
  padding: 0:
}

html {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}


/*****************/
/*****HEADER******/
/*****************/

#header {
  width: 100%;
  margin-top: 0px;
  margin-bottom: 2.5%;
  margin-right: 0px;
  margin-left: 0px;
  padding-top: 2%;
  padding-bottom: 0.5%;
  padding-left: 0%;
  padding-right: 0%;
  border-bottom-style: solid;
  border-bottom-color: black;
  background: lightgrey;
}

#header>h1 {
  color: black;
  margin: 0px 0px 0px 10px;
}

#header>p {
  font-style: italic;
  text-align: left;
  color: black;
  margin: 0px 0px 0px 20px;
}


/*****************/
/*****Body******/
/*****************/

#content {
  /*position: relative;*/
  flex-grow: 1;
  /*height: 100%;
  min-height: 100%;
  max-height: 100%;*/
}

#content>p {
  margin-left: 2.5%;
}

#intro_text {
  font-style: italic;
  margin-bottom: 2.5%;
}

#main_nav {
  margin-top: 1%;
  margin-left: 5%;
}


/*****************/
/******FOOTER*****/
/*****************/

#footer {
  font-style: italic;
  text-align: center;
  /*position: relative;
  bottom: 0;*/
}
<div id="wrapper">

  <div id="header">
    <h1>My Web Space</h1>
    <p> First HTML Page using Sublime Text</p>
  </div>



  <div id="content">

    <p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>

    <p>Links to various test pages I am working with</p>

    <ul id=main_nav>
      <li><a href=test_link.html>Linking to another page test</a></li>

    </ul>

    <p>CONTENT</p>
    <p>CONTENT</p>
    <p>CONTENT</p>
    <p>CONTENT</p>
    <p>CONTENT</p>
  </div>

  <div id="footer">
    <p id=footer_text>Me, 2016</p>
  </div>

</div>

Upvotes: 1

Abood
Abood

Reputation: 570

Try this just modifying #footer

*{
margin:0;
padding:0:
}

html{
    height:100%;
    min-height:100%;
}

#wrapper{
    height: 100%;
}

/*****************/
/*****HEADER******/
/*****************/



#header{

    width: 100%;

    margin-top:0px;
    margin-bottom:2.5%;
    margin-right:0px;
    margin-left:0px;

    padding-top:2%;
    padding-bottom:0.5%;
    padding-left:0%;
    padding-right:0%;

    border-bottom-style:solid;
    border-bottom-color: black;

    background: lightgrey;
}

#header>h1{
    color:black;
    margin: 0px 0px 0px 10px;
}

#header>p{
    font-style: italic;
    text-align: left;
    color:black;
    margin: 0px 0px 0px 20px;
}

/*****************/
/*****Body******/
/*****************/

#content{

    position: relative;

    height:100%;
    min-height: 100%;
    max-height: 100%;
}


#content>p{
    margin-left:2.5%;
}

#intro_text{
    font-style: italic;

    margin-bottom:2.5%;
}

#main_nav{
    margin-top:1%;
    margin-left:5%;
}




/*****************/
/******FOOTER*****/
/*****************/

#footer{

    font-style: italic;
    text-align: center;
  position: fixed;
  background:#f00;
  width:100%;
    bottom: 0;

}
<!DOCTYPE html>
<html>


<head>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="./css/main.css">
     <script src="./js/script.js"></script>
</head>

<body>



    <div id="wrapper">

        <div id="header">
            <h1>My Web Space</h1>
            <p> First HTML Page using Sublime Text</p>
        </div>



        <div id="content">

            <p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>


            <p>Links to various test pages I am working with</p>
            <ul id=main_nav>
                <li><a href=test_link.html>Linking to another page test</a></li>

            </ul>

        </div>

        <div id="footer">
            <p id=footer_text>Me, 2016</p>
        </div>

    </div>

</body>


</html>

Upvotes: 1

Related Questions