5

Web ページのフッターに CSS の問題があります。この記事を使用しましたが、ページのフッターと下部の間に空白があります。私のページの本文にはコンテンツがないため、空のスペースはまだここにあり、必要のない場合は追加のスクロールバーがあります. なぜそこにあるのか本当にわかりません。CSS をクリーンアップしたので、無関係なコードはありません。

HTML:

<!doctype html>
<html>
    <head>
    <link rel="stylesheet" href="style.css">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
    <title>My Page</title>
</head>

<body>
    <div id="container">
        <div id="header">
            <p>
                Header Content
            </p>
            <hr>
        </div>
<div id="body">
    Body Content
</div>
        <div id="footer"><p id="copy">Copyright 2013</p></div>
    </div>
</body>

そしてCSS：

html, body {height: 100%}
body { 
      margin: 0px;
      padding: 0px;
     }

#copy {vertical-align: bottom;text-align:center;font-family:Century Schoolbook;color:#8B0B04;font-size:14px;}
#footer {bottom: 0;width:100%;position: absolute;height: 60px}
#container {min-height: 100%;position: relative}
#body {padding-bottom: 60px}

私のブラウザは Firefox ですが、Chrome ではこれも機能しません。フィードバックとヘルプをお寄せいただければ、とても嬉しく思います。ありがとう！

編集：私は何か間違った私見を投稿しました。後日全ページ掲載します。フィードバックをお寄せいただきありがとうございます。

4

2 に答える 2

3

overflow:hiddenスクローラーを取り外すためのコンテナに使用

#container {
min-height: 100%;
position: relative;
overflow: hidden;
}

およびpadding-bottomボディdivの場合

#body{
  padding-bottom:20px;
}

デモとここにコンテンツ付きのデモがあります

于 2013-04-14T20:01:00.963 に答える
0

あなたが持っているものではなく、このcssを試してみてください：

html, body {
    height: 100%
}
body {
    margin: 0px;
    padding: 0px;
}
#copy {
    vertical-align: bottom;
    text-align:center;
    font-family:Century Schoolbook;
    color:#8B0B04;
    font-size:14px;
}
#footer {
    bottom: 0;
    width:100%;
    position: absolute;
}
#container {
    min-height: 100%;
    position: relative
}
于 2013-04-14T19:52:02.417 に答える