1

Eu estou fazendo um footer no final da página. Já está tudo certo e ele não ocupa toda tela nem com container-fluid:

inserir a descrição da imagem aqui

Segue o código do footer:


   <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>

O código da página:

    <?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>
5

5 Respostas 5

2

A classe .container no footer fará com que ele não tenha a largura total da tela. Essa classe possui breakpoints que varia de largura de acordo com a resolução da tela.

Se quiser que o footer tenha a largura total da tela o tempo todo, troque pela classe .container-fluid e remova as propriedades que você colocou (position e bottom).

O position: absolute não vai dar certo porque, mesmo que o footer seja filho direto do body, ele irá ficar por cima do conteúdo da página caso o conteúdo tenha altura maior que o body.

Mas o seu problema mesmo, além do que expliquei acima, é que o footer está dentro da primeira div com a classe .container:

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

Ou seja, o footer dentro dessa div, em tese, só iria ocupar a largura toda da tela se a largura da tela for menor que 768px por causa dos breakpoints da classe .container.

O que faltou fazer é fechar duas divs antes do footer que não foram fechadas, fazendo com que o footer fique dentro do primeiro .container. Coloque </div> duas vezes antes do footer para que ele seja filho do body:

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

E altere a class e o style do footer para:

<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

Cara vc colocou position:absolute no footer, com isso o footer fica apenas com o tamanho dos elementos internos e não com o tamanho do pai que é o body. Para ele ficar com a largura total da tela vc tem que colocar um width manualmente... No caso eu coloquei footer {min-width: 100% !important} pois o Bootstrap tem uma hierarquia de classe forte.

<!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: Quando vc vai fazer um include vc não precisa colocar o HTML inteiro... Basta dentro do seu footer.html vc colocar apenas a tag <footer> e o que estiver dentro dela. Não precisa por a estrutura inteira de um Documento HTML...

4
  • cara o footer deu certo ,mas quando dei include dele na pagina ele fica menor voce tem alguma ideia do que pode ser? Commented 21/07/2019 às 18:07
  • @AdrianoRufino Vc leu a OBS que eu deixei no final da minha resposta? Tentou fazer o includ só co a tag footer e não como um HTML inteiro? Acho que vc não precisa colocar a classe container no footer tb, telvez resolva. E verifique se vc está fazendo o include do footer direto no body e não dentro de alguma outra tag.
    – hugocsl
    Commented 21/07/2019 às 18:20
  • sim fiz tudo isso o arquivo que tá o footer ele tá certo, mas quando faço include dele em outra pagina para fazer um reaproveitamento disso ele fica menor Commented 21/07/2019 às 18:27
  • @AdrianoRufino eu não recomendo muito mas faz um teste ai, onde eu coloquei 100%, coloque 100vw no lugar para ver se ele fica como vc quer
    – hugocsl
    Commented 21/07/2019 às 18:41
0

Como o Sam falou voce precisa utilizar as classes corretas para a sua estrutura funcionar como deve. Deixo aqui um exemplo de como pode montar a sua 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

Galera obrigado pela ajuda de todos,eu achei uma forma de fazer o que eu queria de uma forma muito simples que eu nem acredito que era só fazer isso então vou deixar aqui o que eu fiz para que todos que tiverem o mesmo problema inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

-3

Ai mano, tenta utiliza o width como auto;

Exemplo:

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

3
  • pior que diminuiu o footer Commented 21/07/2019 às 17:37
  • Qual é o seu real objetivo?
    – KKKllmop
    Commented 21/07/2019 às 17:39
  • objetivo é que esse rodapé fique no final da pagina ocupando toda largura sem fica rolando pra cima enquanto navega e eu já consegui quase tudo menos cobrir as larguras enteiras Commented 21/07/2019 às 17:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .