2

ページの一番下に足を踏み入れようとしています。そのために、私は多くの Web サイトを読みましたが、どのサイトも同じことを言っています。

言及されたことを実行した後、私のフッターは本当に下部に貼り付けられました...しかし...ページのコンテンツはこれで覆われています!

私のCSSには次のプロパティがあります：

html, body {
  height: 100%;
}

body {
  margin: 0px;
  font-family: Arial;
  background-image: url("../img/bg2.jpg");
}

.geral {
    min-height:100%;
    position: relative;
}

.container {
  width: 900px;
}

.container img {
  width: 250px;
  float: left;
}

.container .btn_criar_conta {
  width: 100px;
  float: right;
}

.container .user_detail {
  width: 300px;
  float: right;
}

#topo_pagina {
  height: 110px;
}



.box_login_conteiner {
  width: 410px;
  text-align: left;
}

.box_login {
  width: 350px;
  min-height: 200px;
  background-color: white;
  font-family: Arial;
  font-size: 13px;
  text-align: right;
  padding: 10px;
  border: 1px white solid;
  border-radius: 0.5em;
  color: grey;
  box-shadow: lightgrey 0.0em 0.5em 0.9em;
  padding-right: 50px;
}

.box_login li {
  list-style: none;
}

.box_login a {
  color: blue;
  text-decoration: none;
}

.box_login a:hover {
  color: blue;
  text-decoration: underline;
}

.box_login input {
  border: 1px whitesmoke solid;
  border-radius: 0.5em;
  box-shadow: lightgrey 0.0em 0.1em 0.1em;
  height: 30px;
  width: 250px;
  padding: 5px;
  color: grey;
}

.box_login .img {
  border: none;
  width: 100px;
}

.box_login .btn_submit {
  border: 1px seagreen solid;
  border-radius: 2em;
  box-shadow: grey 0.0em 0.1em 0.1em;
  height: 30px;
  width: 100px;
  padding: 5px;
  color: white;
  background-color: seagreen;
}

.index_login {
  text-align: justify;
  float: right;
  width: 400px;
  color: #2b3856;
  font-family: Geneva;
}

.index_login img{
  text-align: right;
  width: 400px;
}

.index_login hr {
  background-color: lightblue;
  border: 0px;
}

.info_login {
  font-size: 11px;
  padding: 5px;
  background-color: lightgrey;
  border-radius: 0.5em;
  color: grey;
}

.info_login a {
  color: blue;
  text-decoration: none;
}

.info_login a:hover {
  color: blue;
  text-decoration: underline;
}


.box_registrar_conteiner {
  width: 430px;
  text-align: left;
}

.box_registrar {
  width: 430px;
  min-height: 200px;
  background-color: white;
  font-family: Arial;
  font-size: 13px;
  text-align: right;
  padding: 10px;
  border: 1px white solid;
  border-radius: 0.5em;
  color: grey;
  box-shadow: lightgrey 0.0em 0.5em 0.9em;
  padding-right: 50px;
}

.box_registrar li {
  list-style: none;
}

.box_registrar a {
  color: blue;
  text-decoration: none;
}

.box_registrar a:hover {
  color: blue;
  text-decoration: underline;
}

.box_registrar input {
  border: 1px whitesmoke solid;
  border-radius: 0.5em;
  box-shadow: lightgrey 0.0em 0.1em 0.1em;
  height: 30px;
  width: 250px;
  padding: 5px;
  color: grey;
}

.box_registrar .img {
  border: none;
  width: 100px;
}


.rodape {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;
  background-color: grey;
  color: white;
  font-family: Geneva;
  font-size: 11px;
}


.rodape a {
  color: white;
  text-decoration: none;
}

.rodape a:hover {
  color: white;
  text-decoration: underline;
}

.rodape #menu {
  float: left;
  margin-right: 50px;
}

.container_footer {
  width: 900px;
  text-align: left;
}

そして、私のHTMLは次のようなものです:

<html>
    <head>
        <title>Site</title>
        <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style1.css">
    </head>
    <body>
        <div class="geral">
            <div id="topo_pagina">
                <div align="center">
                    <div class="container">
                        <br/>
                        <br/>
                        <a href="/"><img src="{{ STATIC_URL }}img/logo1.png"></a>

                        {% if user.is_authenticated %}
                            <div class="user_detail">
                                <br/>
                                Olá {{ user.first_name|capfirst }}! - <a href="/logout/">Logout</a>
                            </div>
                        {% else %}
                            <a href="/login/"><input type="image" src="{{ STATIC_URL }}img/btn_logar_conta.png" class="btn_criar_conta"></a>
                            <a href="/registrar/"><input type="image" src="{{ STATIC_URL }}img/btn_criar_conta.png" class="btn_criar_conta"></a>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div id="conteudo_pagina">
                <div align="center">
                    <div class="container">
                    {% block conteudo_pagina %}
                    {% endblock %}
                    </div>
                </div>
            </div>  
            <br clear="all">
            <div class="rodape">
                <div align="center">
                    <div class="container_footer">
                        <div id="menu">
                            <h4>Multiplikação</h4>
                            <a href="/login/">Acessar</a><br/>
                            <a href="/registrar/">Criar conta</a><br/>
                        </div>
                        <div id="menu">
                            <h4>Sobre a empresa</h4>
                            Quem somos<br/>
                            Nosso time<br/>
                            Trabalhe com a gente<br/>
                        </div>
                        <div id="menu">
                            <h4>Conectividade</h4>
                            Facebook<br/>
                            Twitter<br/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

誰かが私を助けることができますか？何を試せばいいのかわからない。=(

よろしくお願いします！

4

3 に答える 3

1

スティッキー フッターを実装するようにマークアップを変更した Fiddle を次に示します。

http://jsfiddle.net/2MXvP/1/

私が使用したテクニックはこれです: http://www.cssstickyfooter.com/

重要な変更点は次のとおりです。

  • 要素はマークアップ内で移動されているため、の.rodape兄弟です.geral。
  • .rodapeその高さに等しい負の上余白があります。
  • .geral.mainの高さに相当する下部パディングを持つ新しい子要素 があり.rodapeます。

他にも CSS の変更を行った可能性がありますが、.rodape、 、.geralおよび.main.

上記にリンクしたhttp://www.cssstickyfooter.com/を見ると、それがどのように機能するかを理解できるはずです。そのページには、IE と Opera の互換性に関するメモがいくつかありますが、これは Fiddle には実装していません。Chrome でのみテストしました。

于 2012-06-11T05:16:45.580 に答える
0

フッターを常に表示したいのに、コンテンツの最下部をフッターで覆い隠したくないようです。その場合は、 padding-bottom プロパティを .geral クラスに追加できます。

残念ながら、ここであなたのフッターがどれなのかわかりません.CSSには何も理解するのに役立っていません.

.geral {padding-bottom:200px}

何も覆わずにフッターを表示するための正確なスペースを提供する必要があります。

EDIT 常に表示したいが、テキストを覆い隠したくない場合は、.geral から .rodape を取り出して body タグ内に配置します。html は次のようになります。

<html>
    <head>
        <title>Site</title>
        <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style1.css">
    </head>
    <body>
        <div class="rodape">
             <!-- rodape content -->
        </div>
        <div class="geral">
             <!-- geral content -->
        </div>
    </body>
</html>

このスタイルを CSS に追加します

.rodape {width:100%; height:200px; position:fixed;}
.geral {padding-bottom:200px;}

望む効果が得られると思います。

于 2012-06-11T03:30:53.827 に答える
0

単純：

CSS から削除position: absolute;します (上記の CSS の 189 行目)。

フッターがコンテンツを覆っている理由は、その配置が絶対的であり、コンテンツの通常の流れから外れているためです。上記の行を削除すると、.rodape はデフォルトで静的に配置されます。その後、その前の要素 (#conteudo_pagina など) が考慮され、それらの後に配置されます (それらをカバーすることなく)。

あなたが知りたいかもしれない1つのこと：

<br clear="all">css で使用したくない非推奨の HTML 属性である clear を使用します。代わりに、ABCaesar が提案するパディングを使用してみてください。

于 2012-06-11T04:54:06.337 に答える