Footer content does not cover the entire screen

Asked

Viewed 585 times

1

I’m making a footer at the bottom of the page. It’s already all right and it doesn’t occupy every screen nor with container-fluid:

inserir a descrição da imagem aqui

Follow the footer code:


   <footer class="container" style="background-color:#222222;position:absolute;bottom:0;">
   <img src="../img/footer.png" align="left" class="img-responsive" alt="Image">
        <p class="text-center"  style="color:#ffff"><big>Centro Paula Souza</big></p>
        <p class="text-center" style="color:#8f9594ff">Copyright 2019 - All Rights Reserved</p>
    </footer>

The code of the page:

    <?php 
    include"../conexao/conexao.php";
    include"../componentes/nav-bibliotecaria.php";
    ?>
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title Page</title>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <script src="../js/ativar-botao.js"></script>
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
            <!--[if lt IE 9]>
                <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
                <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
            <![endif]-->
        </head>
        <body>
            <?php 
            /*Menu de datas*/
            echo"<div class='col-lg-4 col-xs-12 col-sm-6 col-md-12 col-lg-offset-8 col-sm-offset-7'>";
            echo"<ul class='nav nav-pills nav-stacked'>";
            echo"<li class='active'><a href='#'>Data de publicações</a></li>";
            echo"<li class='dropdown'>";
            echo"<a class='dropdown-toggle' data-toggle='dropdown' href='#''>2019
            <span class='caret'></span></a>";
            $data = "SELECT * FROM postagens WHERE YEAR(data)=YEAR(NOW())ORDER BY data DESC";
            echo"<ul class='dropdown-menu'>";
            $QueryData = mysqli_query($conect,$data);
            while($result = mysqli_fetch_assoc($QueryData)){
                echo"<li><a href='ver-postagem.php?id=".$result['id']."'>".$result['data']."</a></li>";
            }
            echo"</ul>";
            echo"</li>";
            echo"</ul>";
            echo"</div>";
            ?>
            <!--Cria postagens-->
            <div class="container" >
                <div class="row">
                    <div class="col-lg-8 col-xs-12 col-sm-7 col-md-12">
                        <form action="postar.php" method="post" class="form-horizontal">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title "> Titulo<br><input type="text" name="titulo" class="form-control" size="170" required="required" ></h3>
                                </div>
                                <div class="panel-body">
                                    Descrição
                                    <textarea name="descriçao" id="input" class="form-control" rows="10" cols="167" required="required"></textarea>
                                </div>
                                <div class="panel-footer">
                                    Data <br><input type="date" name="data" class="form-control " required="">
                                    <br>
                                    <br>
                                    <br>
                                    <input type="submit" class="btn btn-default" value="Postar">
                                    <input type="reset" class="btn btn-default" value="Limpar">
                                </div>
                            </div>  
                        </form>
                    </div>
                </div>
                <br>
                <br>
                <br>
                <?php 
                /*Listar postagens*/
                echo"<div class='col-lg-8 col-xs-12 col-sm-7 col-md-9'>";
                $show = "SELECT * FROM postagens ORDER BY data DESC";
                $resu = mysqli_query($conect,$show);
                while($r = mysqli_fetch_assoc($resu)){
                    echo "<form action='salvar.php' method='post'>";
                    echo"<div class='panel panel-default' style='border: 1px solid black'>";
                    echo"<div class='panel-heading'>";
                    echo"<h3 class='panel-title'> <br><input type='text' name='TituloEditar' id='titulo' class='form-control' size='170' required='required' disabled=''  value='".$r['titulo']."'></h3>";
                    echo "</div>";
                    echo"<div class='panel-body'>";
                    echo "<textarea name='DescriçaoEditar' class='form-control' rows='10' cols='167' id='descriçao' required='required' disabled>".$r['descriçao']."</textarea>";
                    echo "</div>";
                    echo "<div class='panel-footer'><br><input type='date' name='DataEditar' class='form-control' id='data' disabled required=''
                    value='".$r['data']."'>"."</div>";
                    echo "<div class='panel-footer'>";
                    echo"<button type='submit' class='btn btn-success glyphicon glyphicon-ok' disabled name='submit' value='".$r['id']."'' ></button>";
                    echo"<button type='button' class='btn btn-primary glyphicon glyphicon-pencil'name='editar' style='left:10px' onclick='botao()'></button>";
                    echo"<a href='apagar.php?id=".$r['id']."'class='btn btn-danger glyphicon glyphicon-trash'style='left:20px' onclick='return confirmar()'></a>";
                    echo"<button type='button' class='btn btn-default glyphicon glyphicon-remove'name='editar' style='left:30px' onclick='cancelar()' ></button>";
                    echo "</form>";
                    echo"</div>";
                    echo "</div>";
                }
                ?>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <!--Rodape-->
                <?php 
                include"../componentes/footer.php";
                ?>
                <!-- jQuery -->
                <script src="https://code.jquery.com/jquery.js"></script>
                <!-- Bootstrap JavaScript -->
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
                <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
            </body>
        </html>
php html bootstrap-3

  • Add html and php tag

  • not have this tag not to choose

  • I edited to see if it is as you want.

  • Thank you very much

  • A similar question: https://answall.com/questions/48154/canvas-ocupar-a-tela-integercom-css

5 answers

2

The class .container on the footer will cause it to not have the full width of the screen. This class has breakpoints which varies in width according to screen resolution.

If you want the footer to have the full width of the screen all the time, switch to the class .container-fluid and remove the properties you have placed (position and bottom).

The position: absolute will not work because, even if the footer is the direct child of the body, it will be above the content of the page if the content is higher than the body.

But your problem even, beyond what I explained above, is that the footer is within the first div with the class .container:

<!--Cria postagens-->
<div class="container" >

That is, the footer inside this div, in theory, would only occupy the entire width of the screen if the width of the screen is less than 768px because of the breakpoints class .container.

What was missing is to close two Ivs before the footer that were not closed, causing the footer to stay inside the first .container. Place </div> twice before the footer for him to be body’s son:

   </div>
</div>
<!--Rodape-->
<?php 
include"footer.php";
?>

And change the class and style of the footer to:

<footer class="container-fluid" style="background-color:#222222;">
   <img src="../img/footer.png" align="left" class="img-responsive" alt="Image">
   <p class="text-center"  style="color:#ffff"><big>Centro Paula Souza</big></p>
   <p class="text-center" style="color:#8f9594ff">Copyright 2019 - All Rights Reserved</p>
</footer>

1

Dude you put position:absolute in the footer, with that the footer is only the size of the internal elements and not the size of the parent which is the body. For it to be the full width of the screen you have to put one width manually... In case I put footer {min-width: 100% !important} because Bootstrap has a strong class hierarchy.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" /> -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    footer {
        min-width: 100% !important;
    }
</style>
</head>

<body>

    <footer class="container" style="background-color:#222222;position:absolute;bottom:0;">
        <img src="../img/footer.png" align="left" class="img-responsive" alt="Image">
        <p class="text-center" style="color:#ffff"><big>Centro Paula Souza</big></p>
        <p class="text-center" style="color:#8f9594ff">Copyright 2019 - All Rights Reserved</p>
    </footer>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

OBS: When you’re gonna make one include you don’t need to put the entire HTML... Just inside your footer.html you just tag <footer> and whatever is inside it. No need to put the entire structure of an HTML Document...

  • guy the footer worked out ,but when I gave him include on the page it gets smaller Have any idea what might be?

  • @Adrianorufino Vc read the OBS what I left at the end of my reply? Tried to make includ just co tag footer and not as a whole HTML? I think you don’t need to put the container class in the footer too, Telvez solve. And make sure you’re doing the footer include straight into the body and not into some other tag.

  • yes I did all this the file that is the footer it is right, but when I do include it in another page to make a reuse of it it gets smaller

  • @Adrianorufino I do not recommend much but makes a test there, where I put 100%, place 100vw in place to see if it looks like you want it

0

As Sam said, Oce needs to use the right classes for his structure to work as it should. Here’s an example of how you can build your base.

header, footer {
  background: #eaeaea;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<header class="container-fluid">
  <div class="container">
    <h3>Header</h3>
  </div>
</header>


<div class="container-fluid">
  <div class="container">
    <p>Content</p>
  </div>
</div>

<footer class="container-fluid">
  <div class="container">
    <p>&copy; All rights reserved.</p>
  </div>
</footer>

-1

Guys thanks for all of your help, inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

-3

Ai bro, try using width as auto;

Example:

footer{ width: auto; height: 100px; }

  • worst that decreased the footer

  • What is your real goal?

  • goal is that this footer is at the end of the page occupying all width without scrolling up while sailing and I’ve managed almost everything but cover the widths

Browser other questions tagged php html bootstrap-3

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