0

進化する質問

私の最初の質問は、ヘッダーのマージンが不思議な垂直スクロールバーを表示することでした。これは、私が達成しようとしていたことが未解決の複雑さで少し曇っていたという事実によるものです. 複雑な問題の 1 つを表す簡単な質問を選びました。現在、数回のフィードバック サイクルの後、解決しようとしている全体的な問題をより適切に処理できるようになったため、質問を改善することができました。これは、他の StackExchange フォーラムでの私の経験です。質問を発展させて結果を 1 ページに収める方が、細かい質問をいたるところに広げて、それぞれの質問に多くの情報が繰り返されることになるよりも優れています。

結論

ここでの主な問題は、ページ全体のさまざまなセクションを適切にボックス化する方法についてです。そのため、これを明確にするためにタイトルを書き直しました。うまくいけば、質問がより興味深いまたは適切なものになることを願っています。CSS2.1 のドキュメントでこれを調べ、フレームとテーブルを使用してページを構成することの誤りに関するあらゆる種類のアドバイスを読みましたが、これを正確に達成する方法についてはまだ不明でした。position: absoluteZemljoradnik からの最新の回答を試してみたところ、彼はと 'position: relative' の関係を適用しました。彼のソリューションのアイデアを拡張することで私が達成できたことは、ここで見ることができます。

歴史

ここでは、以前の発言/質問に番号を付け、元の質問を投稿してからの経験に照らしてコメントしています。

(1)設定に問題があるのではないかと思っていたの100%ですが、使用していた理由は、ページ自体が表示されている場合でもウィンドウの下部にフッターを表示したままにすることに関する Web マスターの別の質問への回答によるものです。あまり内容がありませんでした。の使用はoverflow:hidden実際には解決策ではありません。なぜなら、垂直スクロールを必要とする十分なコンテンツがある場合、それを失ってしまうからです。

(1) に対するコメント:正しい。

(2)これは、ビューの四角形がコンテンツで部分的にしか満たされていない場合に、フッターをウィンドウの下部に貼り付けるための、CSS3 に準拠した適切なソリューションがないことを意味しますか? もしそうなら、W3C の最新の考え方だけを使用した Web サイトを作成したいので、やめます。

(2) に関するコメント: ビューの上部にヘッダーを付け、下部にフッターを付けて、両方を常に表示し、必要に応じて垂直方向にスクロールする間にコンテンツを配置することに問題はないと正直に信じています。これは、メインのコンピューター ブラウザーの状況でうまく機能します。非常に小さなウィンドウ付きデバイスが問題になる場合は、別のスタイル セットを作成してmedia: media-typeオプションを使用できます。これは、あるソリューションを別のソリューションで妥協するのではなく.

(3)もちろん、持っている必要がないことはわかっていますmargin: 2px。ここにコードを貼り付けるのではなく、とにかくブラウザから誰でも見ることができると思います.

フッターの実験

(3) に関するコメント: Zemljoradnik による回答は、これが簡単に解決されることを示しています。彼の助けを借りて、私はこれをさらに一歩進めることができました. これで、上部に絶対ヘッダー、下部に絶対フッターがあり、メインコンテンツがその間をスクロールします。これにより、スクロールバーがヘッダーとフッターの形状に干渉しないため、一貫した外観が得られます。

(4)私の元の質問は、最初は単純な質問のように見えたかもしれませんが、他の問題を解決することと絡み合っています。私は、コンピューターや数学の初心者でも、インターネット フォーラムでそれらについて話し合っているだけでもないことを指摘しておく必要があると感じています。他の誰かの編集によって分解された MWE を意図的に提供する。プログラムの実行に必要な関連スタイルを分離し、それらをヘッダーに配置するのに苦労しました。私は通常ファイルを使用しますが、完全に機能する例を提示するために、この質問に貼り付けるために.cssそれらを配置する方が簡単だと思いました。これは通常、回答者が好むものです。<head>

残念なことに、提案された編集を行う前に議論するためのプロトコルがないようです。一般的に、StackExchange は民主的であることを示しています。皮肉なことに、最初にこの実験のアイデアを得た場所であるため、質問がウェブマスターからここに移行された理由もわかりません.

(4) に関するコメント:私はこれらのコメントを支持します。そこに言及されているポイントのいくつかは、必ずしも初心者ではなく、ここで初めての新しいユーザーに不快感を与えるためです。質問を改善する方法をアドバイスする方が、議論せずにすぐに誰かの上に編集したり、質問に投票しないか、有益なアドバイスを提供せずに完全に無視して質問を中傷するよりもはるかに優れています。繰り返しますが、これは私が maths.se と tex.se から学んだことです。

元の質問本文

（5）<div>ページがほとんど空であっても、ゼロ以外のマージンを一番上に追加すると垂直スクロールバーが表示される理由を誰かが知っていますか. 私はさまざまな理由で次のコードを試してきましたが、この奇妙さを引き起こしているのがmargin: 2px;私の中にあることに気付くまでにしばらく時間がかかりました. <header>その行を削除すると、問題はなくなります。Safari と Firefox で発生します。私はMacで作業しています。

あなたがそれをしている間に、私の他のコードに何か疑わしいものを見つけたら、私に知らせてください。私は今日すでにさまざまな質問をする寸前でしたが、自分自身を整理するか、検索してここで答えを見つけました。最新の W3C ガイドラインなどすべてに従うことに熱心です。

(5) についてのコメント:これはばかげた質問ではありません。また、私のコード全般についてコメントを求めましたが、これもばかげた質問ではないと思いました。Zemljoradnik はこの点で非常に役に立ちました。私は彼に感謝しています。

(6)

CSS

footer_thing.css

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
header.topic {
    border: 1px solid black;
    padding: 4px;
    background-color: #99CC99;
    width: auto;
    margin: 2px;
}
footer.topic {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid black;
    padding: 4px;
    background-color: #99CC99;
    height: 30px; /* Height of the footer */
}
span.boxed_links {
    display: inline-block;
    vertical-align: middle;
    padding: 4px;
    width: auto;
    border: 1px solid black;
    margin-left: 80px;
    background-color: #FFF7CA;
}
a.top_link {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 75%;
}
p.explain {
    max-width: 15cm;
    text-indent: 1.5em;
    padding: 4px;
    background-color: #FFCC33;
}

HTML

<html>
    <head>
        <title>
            Footer That Stays Put
        </title>
        <style media="screen" type="text/css">
            @import "footer_thing.css";
    </style>
    </head>
    <body>
        <header class="topic">
            <span class="boxed_links">
                <a class="top_link" href="">
                    Home
                </a>
                |
                <a class="top_link" href="">
                    Topics
                </a>
            </span>
        </header>
        <p class="explain">
        What's with the vertical scroll bar, there's hardly anything here?
        </p>
    </body>
</html>

(6) へのコメント:編集時にコードの一部が完全に切り取られた後、一部のコードを上記に戻さなければならなかったことに少し不満を感じていたので、html 部分が完全に機能するように修正しました。コード。完全な例は再度貼り付けません。私は自分の Web サイトを持っているので、関連する作業ページへのリンクを提供するのは簡単です。

4

3 に答える 3

2

htmlおよび要素にbody100% の高さを指定しました。つまり、それらは既にウィンドウ全体の高さを占めています (htmlの 100% を取りwindow、 の 100% をbody取りますhtml)。その子の 1 つにマージンを追加すると、そのマージンはbody要素の高さの合計になり、高さ 100% ウィンドウの高さ + 2px になります。

編集: フッターをページの下部に貼り付けることができます。これはそれを行う方法です：

<div id="scrollable-contanier">
    <header>
        <span class="boxed_links">
            <a class="top_link" href="">
                Home
            </a>
            |
            <a class="top_link" href="">
                Topics
            </a>
        </span>
    </header>
    <div id="content">
        <p class="explain">
            You can put as much content as you like in here, the fooret will stay locked to the bottom, and the rest of the page will have a scrollbar when needed.
        </p>
    </div>
</div>
<footer>
</footer>

CSS:

html, body {
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0;
}

#scrollable-contanier {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 34px;
    overflow-y: auto;
}

header {
    height: 30px;
    border: 1px solid black;
    padding: 4px;
    background-color: #99CC99;
}

footer {
    position: absolute;
    height: 30px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-color: #99CC99;
    border: 1px solid black;
}

http://jsfiddle.net/P75f9/

position: relativeこのようにして、との間の関係を利用していますposition: absolute。絶対配置された要素は、常に最初の相対配置された祖先に対して相対的に配置されます。したがって、body要素の高さと幅を 100% にすることで (高さと幅はそのコンテンツに依存せず、ウィンドウに合わせて引き伸ばすことができます)、top、bottom、leftおよびright属性を使用して、ウィンドウ内の任意の場所に要素を配置できます。

于 2013-10-07T09:59:40.183 に答える
1

本文の最初の要素の上余白の代わりに、本文自体にパディングを使用し、ボックス サイズで調整します。

したがって、CSS では、body が取得されます

margin: 0;
padding: 2px 0 0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;

そして header.topic を取得します

margin: 0 2px 2px;

それだけです。

デモ

于 2013-10-07T14:00:18.487 に答える
1

remove html,body height:100%; or solution no. 2 :このように追加してくださいoverflow:hidden;

デモ

CSS

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

また

デモ1

CSS

html,body{
margin:0;
padding:0;
}
于 2013-10-07T09:43:21.907 に答える