Footer at the bottom of the page and after the content

Asked

Viewed 308 times

-1

I have a footer that gets fixed right after some small content 'middle of the screen' and not at the end of the page, I use sidebar.

I would like it to be at the bottom of the page when there is no content, and at the end when the content is large that has scroll bar.

CSS:
#footer {
  position: relative;
  clear: left;
  background: #7386D5;
  text-align: center;
  padding: 2px;
  height: 5%;
  bottom:0px;
  left:0px;
  -ms-flex-item-align: end;
  align-self: flex-end;
} 
rodape.php:
<div id="footer">
  <label id="label">Copyright © Site name, 20XX</label>
</div>

Html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Sistema de Avaliação - SAV</title>
        <!-- Bootstrap CSS CDN -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
        <!-- Our Custom CSS -->
        <link rel="stylesheet" href="CSS/style4.css">
        <!-- Font Awesome JS -->
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="wrapper">
            <!-- Sidebar  -->
            <nav id="sidebar">
                <div class="sidebar-header">
                    <h3>Sistema de Avaliação - SAV</h3>
                    <strong>SAV</strong>
                </div>
                <ul class="list-unstyled components">
                    <?php
                    include './menuCadastro.php';
                    ?>
                    <li>
                        <a href="avaliacao.php">
                            <i></i>
                            Avaliação
                        </a>
                    </li>
                    <li>
                        <a href="relatorios.php">
                            <i></i>
                            Relatórios
                        </a>
                    </li>
                    <li>
                        <a href="alterarSenha.php">
                            <i></i>
                            Alterar Senha
                        </a>
                    </li>
                    <?php
                    include './menuParametro.php';
                    ?>
                </ul>

                <ul class="list-unstyled CTAs">
                    <li>
                        <a href="logoff.php" class="article"> Sair</a>
                    </li>
                </ul>
            </nav>
            <!-- Page Content  -->
            <div id="content">
            Conteúdo
            <?php
            require './rodape.php';
            ?>
            </div>
        </div>
    </body>
</html>
css html5

  • create three segments in your template header which can also be hero if you don’t want a header, main and footer, in the main insert a css class that contains a VH calculation by subtracting the hero or header adding to the footer on a property min-height: example .main-fluent min-height calc((64px + 256px) - 100vh) where in this example Hader has 64px and footer has 256px

  • I don’t get it right, I use side bar.

  • Where’s your code? How do you want us to answer you if you just put in a div and say you have a sidebar? Put in the minimum code and context so someone can answer you

  • @Ari didn’t understand how so sidebar?

  • @Ari, have a look at this link https://codepen.io/flourigh/pen/gObMxzz is a micro view of what I mentioned

  • It does not work for me, when I put the content it is fixed and not at the end of the content. position: Fixed; clear: left; background: #7386D5; text-align: center; padding: 0; height: 3.5%; width: 100%; bottom:0; left:0; -ms-flex-item-align: end; align-self: flex-end;

  • @Ari took a look at the link?

  • I looked yes, I put in mine and it was fixed.

  • nor has Fixed parameter in my example, if you left in yours, remove

Show 4 more comments

1 answer

-2

You can use 

#footer{

width: 100%;
bottom: 0;
position: fixed;

}

Instead of using the position: relative use the Fixed

  • In this CSS snippet will not solve what he wants as he says "and at the end when the content is large that has scrollbar" if any content is placed that makes the page have scrollbars the footer will always be there fixed and he does not want this.

  • True @leandro, it gets fixed at the bottom of the page, if it has scrolling it remains fixed.

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.