2

このページ ( http://www.alsite.com.br/angelogarcia/angelogarcia.html ) にはスティッキー フッター ( http://www.cssstickyfooter.com/ ) があります。

したがって、div#mainは 100% の高さからフッターのサイズ (70px) を差し引いたものである必要があり、私の div.conteudoは div と同じサイズで、#main高さも 100% です。何が起こっているかを簡単に確認できるように色を設定しました

私は明確ですか？

JSFiddle リンク: http://jsfiddle.net/EugRP/

構造は次のとおりです。

<body>
<div id="wrap">
    <div class="main">
        <div class="sidebar"></div>
        <div class="conteudo"></div>
    </div>
</div>
<div id="footer"></div>
</body>

私のCSS：

html, body {
    height: 100%;
}


#wrap {
    min-height: 100%;
}
#main {
    width:100%;
    min-width: 960px;
    margin: 0 auto;
        background: #FFCC00;
    padding-bottom: 70px; /* must be same height as the footer */
}

#footer {
    position: relative;
    margin-top: -70px; /* negative value of footer height */
    height: 70px;
    clear:both;
}

.conteudo{
    padding:0 15px;
    width:60%;
    margin-left: 30px;
    background: #000000;
    background:rgba(255,0,0,0.8);
    text-align: justify;
    font-size: 16px;
    letter-spacing: 0.8px;
}
4

3 に答える 3

0

.conteudo = (#main + #footer) = 100% ということですか??

提案:
#main = 95% 、 #footer = 5% を設定します

解決策 ：<br> JavaScript を使用してクライアント ブラウザのピクセルの高さを確認し (すべてのモニターが同じではない可能性があります)、ピクセルを計算します。

しかし、JavaScript の仕組みがわからない場合は、自分で学んでください。Google は便利です。

英語は私の母国語ではありません。うまく説明できれば幸いです。

于 2013-08-27T19:30:44.893 に答える
0

わかりました...以下の行をコピーして貼り付けてください = =

<---javascriptの開始--->

var htmlHeight;

htmlHeight = document.getElementById("ページ").style.height;

document.getElementById("main").style.height = htmlHeight - 70;

<---javascript終了--->

これらの行を と の間に貼り付けます

>html< (id="Page") に id を追加することを忘れないで
ください >div name="main"< (id="main") に id を追加してください
#main の高さを制御する「要素」 htmlの高さです。
次に、 #main = (html の高さ) - 70px

うまくいかない場合はjavascriptを一番下(html内)に置いてみてくださいこれもダメならjavascriptを
学ぶ

HTML は Web の本体ですが、JavaScript が Web の心臓部であることを忘れないでください。

于 2013-08-27T19:57:03.497 に答える
0

「スペーサー」divを作成する必要があります

CSS

#spacer {
    height: 100px; // same height as footer
}
.main {
    height: 100%;
}

HTML

<body>
<div id="wrap">
    <div class="main">
        <div class="sidebar"></div>
        <div class="conteudo"></div>
    </div>
</div>
<div id="spacer"></div>
<div id="footer"></div>
</body>
于 2013-08-27T19:13:25.113 に答える