Home > OS >  Footer is hovering right below content
Footer is hovering right below content

Time：10-06

I have a pretty simple html page that I need to set up. I took inspiration from enter image description here

This is pretty strange to me, and I cannot figure out which change that I have made that could have forced this. This being said, the footer in the "old" code also is floating and not fixed to the bottom, which I would like it to be.

So there's two things that I'm having trouble with:

  1. getting my footer to reach both sides of the screen as a block
  2. Having it fixed to the bottom.

What I have tried

I tried following this article, removing my already existing footer class, and making this one:

      #footer {
    position: fixed;
    padding: 10px 10px 0px 10px;
    bottom: 0;
    width: 100%;
    /* Height of the footer*/ 
    height: 40px;
    background: grey;
  }

This hasnt worked though. This and a bunch of other articles really have'nt done the trick.

Any help would me much appreciated

EDIT

unclosed tags have now been fixed, thx. I have also updated code. The issue still persists

EDIT 2

thanks for the very good inputs, which have helped me in dispaying the footer again. But still it's floating in the middle of the screen, I will also need to have it fixed

CodePudding user response：

It is happen because of style

body{
  display: flex;
}

But it could be not one reason. It deform bootstrap styles and change footer appereance

In addition, if you add styles for id #footer you should add it to your html code

CodePudding user response：

You had a lot of tags not closed...you should be more careful.

Change the html like this

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="askStyles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>    

  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Watts social</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
 
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container text-center">    
  <div class="row">
    <div class="col-sm-3 well">
      <div class="well">
        <p><a href="#">Weekly usage</a></p>
      </div>

      <div class="alert alert-success fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

        Did you save some cash? Buy a tree!
      </div>
      <p><a href="#">KWH price monthly: 500 dkkr </a></p>
      <p><a href="#">Total KWH </a></p>
      <p><a href="#">Click here to view good tips</a></p>
    </div>
    <div class="col-sm-7">
    
      <div class="row">
        <div class="col-sm-12">
          <div class="panel panel-default text-left">
            <div class="panel-body">
              <form action="/action_page.php">
                <textarea id="w3review" name="w3review" rows="4" cols="50"> Update your status...
                  </textarea>
                  <br><br>
                  <input type="submit" value="Submit">
                </form>
              
              </button>     
            </div>
          </div>
        </div>
      </div>      
      </div>
      </div>

      
      <div class="row">
        <div class="col-sm-3">
          <div class="well yellow">
           <p>Christian Hvidekjær</p>
          </div>
        </div>
        <div class="col-sm-9">
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 200</span>
              <span class="label label-primary">Total KWH</span>
              <span class="label label-success">Labels</span>
          </div>
          </div>

        </div>
      </div>
      
      <div class="row">
        <div class="col-sm-3">
          <div class="well green">
           <p>Frederik Weis Holst</p>
          </div>
        </div>
        <div class="col-sm-9">
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 100</span>
              <span class="label label-primary">Total KWH: 200</span>
              <span class="label label-success">Labels</span>
          </div>
          </div>

        </div>
      </div>
      <div class="row">
        <div class="col-sm-3">
          <div class="well red" >
           <p>Carla Sørensen</p>
          </div>
        </div>
        <div class="col-sm-9" >
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 100</span>
              <span class="label label-primary">Total KWH: 200</span>
              <span class="label label-success">Labels</span>
          </div>
          </div>

        </div>
      </div>

      </div>
<footer>
<div class="container-fluid text-center">
  <p>Footer Text</p>
</div>

</footer>

<style>
  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

  .mytags {
    display:inline-block;
 }

 .red {
  background-color: #e21313;
}

.yellow {
background-color: #eaee19;
}

.green {
background-color: #0beb16;
}

.neutral {
  background-color:#f5f5f5;
}
footer {background-color:gray}</style>
</body>


</html>

CodePudding user response：

You had some mistakes on your html. For example, your footer was outside of body and some div tags not closed at all. I fixed those. And also added those lines for your purpose.

footer {
    /* get all available space */
    width: 100%;

    /* see visual change */
    color: white;
    background-color: gray;

    /* for better aligning */
    padding: 1em 0;
}

See complete example here.

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem; /* Footer height */
    margin-top: 19px;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mytags {
    display: inline-block;
}

.red {
    background-color: #e21313;
}

.yellow {
    background-color: #eaee19;
}

.green {
    background-color: #0beb16;
}

.neutral {
    background-color: #f5f5f5;
}

footer {
    /* get all available space */
    width: 100%;

    /* see visual change */
    color: white;
    background-color: gray;

    /* for better aligning */
    padding: 1em 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="askStyles.css">
    <link rel="stylesheet" href="style/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>

    </style>
</head>

<body>

    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Watts social</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Messages</a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container text-center">
        <div class="row">
            <div class="col-sm-3 well">
                <div class="well">
                    <p><a href="#">Weekly usage</a></p>
                </div>

                <div class="alert alert-success fade in">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

                    Did you save some cash? Buy a tree!
                </div>
                <p><a href="#">KWH price monthly: 500 dkkr </a></p>
                <p><a href="#">Total KWH </a></p>
                <p><a href="#">Click here to view good tips</a></p>
            </div>
            <div class="col-sm-7">

                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-default text-left">
                            <div class="panel-body">
                                <form action="/action_page.php">
                                    <textarea id="w3review" name="w3review" rows="4" cols="50"> Update your status...
                  </textarea>
                                    <br><br>
                                    <input type="submit" value="Submit">
                                </form>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-3">
                        <div class="well yellow">
                            <p>Christian Hvidekjær</p>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="well neutral">
                            <p>Just Forgot that I had to mention something about someone to someone about how I forgot
                                something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
                            <div class="bottom-left-text">
                                <span class="label label-default">KWH price: 200</span>
                                <span class="label label-primary">Total KWH</span>
                                <span class="label label-success">Labels</span>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-3">
                        <div class="well green">
                            <p>Frederik Weis Holst</p>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="well neutral">
                            <p>Just Forgot that I had to mention something about someone to someone about how I forgot
                                something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
                            <div class="bottom-left-text">
                                <span class="label label-default">KWH price: 100</span>
                                <span class="label label-primary">Total KWH: 200</span>
                                <span class="label label-success">Labels</span>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="well red">
                            <p>Carla Sørensen</p>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="well neutral">
                            <p>Just Forgot that I had to mention something about someone to someone about how I forgot
                                something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
                            <div class="bottom-left-text">
                                <span class="label label-default">KWH price: 100</span>
                                <span class="label label-primary">Total KWH: 200</span>
                                <span class="label label-success">Labels</span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="container-fluid text-center">
        <p>Footer Text</p>
    </footer>
</body>

</html>

CodePudding user response：

You had a few things happening here, I'll try to list them for you:

IN YOUR HTML CODE

  1. Many unclosed tags, this was causing your footer element to be contained within multiple div tags
  2. You still have a button closing tag but no associated opening tag (this is on line 68. I wasn't sure what you wanted here so left it as is.

IN YOUR CSS CODE

  1. You referenced #footer. The # denotes an id whereas the footer element can simply be referenced as footer. No hashtag needed.
  2. If you use position: absolute; bottom: 0; for your footer, it will load at the bottom of the screen and scroll up with your content as you navigate through the page. Removing these tags fixes this. Unnecessary, as well, since your footer elements rests outside of the body element.

I think that's everything. It would be worthwhile going through and comparing to your original code to see where I cleaned things up a bit and what's different as I may have missed something (apologies if so).

Here's the updated HTML and CSS!

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="askStyles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>    

  </style>
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Watts social</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
 
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container text-center">    
  <div class="row">
    <div class="col-sm-3 well">
      <div class="well">
        <p><a href="#">Weekly usage</a></p>
      </div>

      <div class="alert alert-success fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>

        Did you save some cash? Buy a tree!
      </div>
      <p><a href="#">KWH price monthly: 500 dkkr </a></p>
      <p><a href="#">Total KWH </a></p>
      <p><a href="#">Click here to view good tips</a></p>
    </div>
    
    <div class="col-sm-7">
      <div class="row">
        <div class="col-sm-12">
          <div class="panel panel-default text-left">
            <div class="panel-body">
              <form action="/action_page.php">
                <textarea id="w3review" name="w3review" rows="4" cols="50"> Update your status...
                  </textarea>
                  <br><br>
                  <input type="submit" value="Submit">
              </form>
              
              </button>     
            </div>
          </div>
        </div>
      </div>
      
      <div class="row">
        <div class="col-sm-3">
          <div class="well yellow">
           <p>Christian Hvidekjær</p>
          </div>
        </div>
        <div class="col-sm-9">
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 200</span>
              <span class="label label-primary">Total KWH</span>
              <span class="label label-success">Labels</span>
            </div>
          </div>

        </div>
      </div>
      
      <div class="row">
        <div class="col-sm-3">
          <div class="well green">
           <p>Frederik Weis Holst</p>
          </div>
        </div>
        <div class="col-sm-9">
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 100</span>
              <span class="label label-primary">Total KWH: 200</span>
              <span class="label label-success">Labels</span>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3">
          <div class="well red" >
           <p>Carla Sørensen</p>
          </div>
        </div>
        <div class="col-sm-9" >
          <div class="well neutral">
            <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
            <div class="bottom-left-text">
              <span class="label label-default">KWH price: 100</span>
              <span class="label label-primary">Total KWH: 200</span>
              <span class="label label-success">Labels</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

</html>

CSS

@charset "UTF-8";
/* CSS Document */

footer {
    width: 100%;
    height: 2.5rem;            /* Footer height */
    margin-top: 19px;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mytags {
    display:inline-block;
 }

.red {
  background-color: #e21313;
}

.yellow {
background-color: #eaee19;
}

.green {
background-color: #0beb16;
}

.neutral {
  background-color:#f5f5f5;
}

Page link：https//www.codepudding.com/os/140926.html

Prev:CSS <ul> is taking an extra space when trying to center it [duplicate]
Next:What is the default CSS of a textarea?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding