1

さて、私がデザインしているページにこのフッターがありますが、問題が発生しました。フッターはページの下部に貼り付けられますが、コンテンツはそれを超える可能性があります...これが私が意味することです-http://i46.tinypic.com/2zted15.png。

これが私のフッターのCSS/HTMLコードです：http：//pastebin.com/ZKCuBjhn

よろしくお願いします。

編集：これがページ全体のコードです-HTMLコード：pastebin.com/RAj11cPP --- CSSコード：pastebin.com/0kMgb1R2

注：コード内のとんでもない量の
タグは、私の問題を実証するためのものでした。

4

2 に答える 2

0

clear: both;フッタースタイルに追加してみてください。ページの残りの部分のコードを見るといいでしょう。

本当の答え：
あなたのコードを見た後、これはあなたが望むものであるように思われます：http: //pastebin.com/Letx9hPA

フッターの位置を固定に変更して、ページの下部に表示されるようにしました。それがあなたが望むものでない場合は、それが自由に押し下げられるように、すべて一緒に位置を削除します。

また、コンテンツをコンテンツdivでラップして、すべてが表示されるように下部に必要なスペーサーを追加できるようにしました。padding-bottom: 100pxフッターの高さを設定してスペーサーを追加しました。

于 2012-05-08T21:20:52.500 に答える
0

divに位置：absoluteを使用しているため、ページの通常のフローからそれを削除します。その後、上位のコンテンツが通過します。

以前のhtmlがdivまたは上位の部分全体を囲むようなものである場合は、divを使用し、「絶対位置」にしないでください。幅：100％、マージン：0autoを使用してください。問題はフッターではなく、フッターの前にあるコードです。

divの場合は、高さを指定する必要がありますが、min-heightを使用するため、内部のコンテンツがオーバーフローすると、divは適切に動作し、フッターを下に押します。高さを使用すると、divはその高さを採用し、オーバーフローした内部が漏れ出します。

簡単なコードは次のとおりです。

body {
        background-color: #d6d6d6;
    }

    .header {
        background-color: #006F8D;
        color: #fff;
        margin: 0 auto;
        width: 600px;
        height: 100px;
    }

    .center {
        background-color: #fff;
        color: #454545;
        margin: 0 auto;
        width: 600px;
        min-height: 100px;
    }

    .footer {
        background-color: #fff;
        color: #454545;
        margin: 0 auto;
        width: 600px;
        height: 50px;
        border-top: 1px solid #ccc;
    }

これはCSSの場合であり、HTMLの場合です。

<div class="header">menu 1 - menu2 - menu3</div>
    <div class="center">Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br /><br />
    v
    v
    Middle<br /><br />Middle<br /><br />Middle<br /><br />v
    v<br />v
    Middle<br /><br />v
    v<br />Middle<br />
    v
    v
    v
    v
    v
    v
    vMiddle<br />Middle<br />Middle<br />Middle<br />
    <br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />
</div>
<div class="footer">Footer</div>

フッターを絶対に配置する必要がある場合、答えは別のものです。それを明確にして、他の質問に答えます。

編集：私のコード（cssとGODを使用していません、非推奨のTAGS !!!!フォント、センターなどを使用しないでください）

   <style type="text/css">
           .header {
        background-color: #006F8D;
        color: #fff;
        margin: 0 auto;
        width: 600px;
        height: 100px;
    }

    .center {
        background-color: #fff;
        color: #454545;
        margin: 0 auto;
        width: 600px;
        min-height: 100px;
    }

    .footer {
        background-color: #fff;
        color: #454545;
        margin: 0 auto;
        width: 600px;
        height: 50px;
        border-top: 1px solid #ccc;
    }
</style>
</head>
<title>Website Homepage</title>
<body>

<!--====================Begin Navigation Bar========================-->
<div class="header" id="navigation">
<div style="float:left;">
    <a href="index.html">Home</a>
    <a href="signup.html">Sign Up</a>
    <a href="login.html">Login</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
</div>
 </div>
<!--====================End Navigation Bar==========================-->

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--====================Begin Content Area======================-->
<div class="center" style="padding:10">
See my problem?
</div>
<!--====================End Content Area========================-->

    <!--====================Begin Footer========================-->

<div class='footer'>
<div style="padding-top:20px;">

                Website. All Rights Reserved.

<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
<input name="q" type="hidden" />
<input type="text" placeholder="Search our site..." name="qfont" /> <input type="submit" value="Search" />
</form>
</div>
</div>

    <!--====================End Footer==========================-->

</body>
</html>
于 2012-05-08T21:41:43.567 に答える