身長およそ100％のボーダー（HTML 4.01 Strict）

これは私を今や夢中にさせています。身長およそ100％のボーダー（HTML 4.01 Strict）

私はドキュメントの周りに境界線が必要です。それはうまくウィンドウ/ビューポート全体を回っているはずです。だから私は定義します：

body { 
    border: 1px solid red; 
}

私のドキュメントが奇妙なモードでは、これはうまく動作します。少なくとも私はIEの主な目標です。赤い枠線が私のページの端に現れます。あらかじめ定義されたCSS bodyとhtmlが画面いっぱいに設定されているためです。

コンテンツの本当（小さい）サイズにHTML 4.01厳格なDOCTYPE、bodyとhtml崩壊を設定することで、標準モードに行くときは、境界線は右画面の中央に描画されます。

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

body { 
    border: 1px solid red; 
}

を私は一番下/右の境界線を表示するために、正確に1ピクセルをスクロールし、—スクロールバーを取得：だから私は定義します。しかし、私はその国境をすぐに見えるようにしたい。

「height：99.9％;」、「overflow：hidden」、または「quirksモードに戻って」などの方法で不要なスクロールバーを使わずに100％のボーダーを取得できますか？ IEのみがうまくいけば、クロスブラウザーはもちろん良いでしょう。

出典

2009-05-20 Tomalak

イントラネットアプリケーションのIEのみ？あなたはIE以外のユーザーの100％を得ることができる唯一の場所？クレイジー！ :) – Kornel

企業環境とFirefoxは互いに排他的です。時間の少なくとも99％。そして、Mozillaがやっと*手動のNTLM認証（またはクライアントごとにabout：configを手がかりにして）が本当にそれをカットしない限り、これはそのままになります。 – Tomalak

リモート設定。 http://wetdog.sourceforge.net/ – SpliFF

マリファナたばこはすでに述べたように：ポイントは、描画アルゴリズムのテーブルを使用するソリューションであり、純粋なCSSのソリューションも可能であるということですこれにより、枠線がwidthとheightの外側になります。しかし、あなたが指定した幅と高さの100％の範囲内に収まるようにします。 1つの回避策は、ボーダーボックスモデルを選択することですが、quirksモードに戻すことなくIE 6と7で行うことはできません。

IE 7でも別のソリューションが動作します。ウィンドウのスクロールバーを取り除くには、htmlとbodyを100％の高さに設定し、overflow〜hiddenに設定するだけです。次に、すべての4つを0に設定して、境界線をビューポートの端に固定するように、赤い枠線とすべての内容を取得するラッパーdivを挿入する必要があります。overflow〜auto（スクロールバーをラッパーdiv ）。

一つだけ欠点があります：IE 6はleftとrightとの両方topとbottomの両方の設定をサポートしていません。これに対する唯一の回避策は、条件付きコメント内でCSS expressionsを使用して、ラッパーの幅と高さを明示的にビューポートのサイズから境界線の幅を引いた値に設定することです。

は、それが簡単に私が5つのピクセルに境界線の幅を拡大し、次の例では、効果を確認するために作成するには：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Border around content</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

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

    #wrapper { 
     position: absolute; 
     overflow: auto; 
     left: 0; 
     right: 0; 
     top: 0; 
     bottom: 0; 
     border: 5px solid red; 
    } 
    </style> 
    <!--[if IE 6]> 
    <style type="text/css"> 
    #wrapper { 
     width: expression((m=document.documentElement.clientWidth-10)+'px'); 
     height: expression((m=document.documentElement.clientHeight-10)+'px'); 
    } 
    </style> 
    <![endif]--> 
</head> 
<body> 
    <div id="wrapper"> 
    <!-- just a large div to get scrollbars --> 
    <div style="width: 9999px; height: 9999px; background: #ddd"></div> 
    </div> 
</body> 
</html>

PS：は、私はちょうどあなたがなるほど、overflow: hiddenを好きではない見ました... 。

更新：は私が（ビューポートのエッジに固執4つのdivを使用して境界線を偽造することによってoverflow: hiddenを使用して周りを取得するために管理することができますだけでなく、Oフルサイズのdivで全体のビューポートをverlayします。その下のすべての要素はアクセスできなくなります）。これは素晴らしい解決策ではありませんが、少なくとも通常のスクロールバーは元の位置にとどまります。私はIE 6がCSS式を使って固定位置をシミュレートできるようにすることはできませんでしたが、とにかくそれらの式がvery expensiveであり、レンダリングが面倒に遅くなったので恐ろしく見えました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Border around content</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    #border-t, #border-b, #border-l, #border-r { 
     position: fixed; 
     background: red; 
     z-index: 9999; 
    } 

    #border-t { 
     left: 0; 
     right: 0; 
     top: 0; 
     height: 5px; 
    } 

    #border-b { 
     left: 0; 
     right: 0; 
     bottom: 0; 
     height: 5px; 
    } 

    #border-l { 
     left: 0; 
     top: 0; 
     bottom: 0; 
     width: 5px; 
    } 

    #border-r { 
     right: 0; 
     top: 0; 
     bottom: 0; 
     width: 5px; 
    } 
    </style> 
</head> 
<body> 
    <!-- just a large div to get scrollbars --> 
    <div style="width: 9999px; height: 9999px; background: #ddd"></div> 
    <div id="border-t"></div><div id="border-b"></div> 
    <div id="border-l"></div><div id="border-r"></div> 
</body> 
</html>

出典

2010-06-29 12:12:29

+1、少なくともそれはまともな説明です。ええ、「オーバーフロー：隠された」というのはちょっとハッキリですが、その周りには方法がないと思います。私の元々の要求は実現することが不可能だと思われるが、それは答えでもある。 – Tomalak

PS：アップデートで素敵な回避策を！もしできれば2番目の+1を与えるだろう。 :) – Tomalak

@トマラク：私はあなたのためにそれをやった。 ;-) – Chris

CSS3が境界線とボックスモデルの切り替えを行うまで、2つのdivが必要です。 100％の高さを与える最初のものと、境界を提供するものの2番目のもの。それ以外の場合、境界線は100％の高さ（つまり、1px + 100％+ 1px）の外側に移動します。

BTWあなたは "IEのみ"に行く前にいくつかの統計を収集する必要があります。 IEはかつてこれをしたマーケットシェアを持っていません。ユーザーの10〜30％が他のブラウザを使用している可能性があります。

出典

2009-05-20 08:35:17 SpliFF

イントラネットアプリケーションです。それはIEだけだと言うのはかなり安全です。;-) – Tomalak

html要素の罫線を設定してみてください。 body要素は必要なだけ高いですが、覚えている限り、html要素は全体の領域をとります（背景も設定する必要があります）。

どのように境界線が表示されるのか分かりませんが、通常は背景のみを設定します。

出典

2009-05-20 08:43:06

同じ問題はありません。 HTML要素は、文書が標準モードにあるときに必要とされるのと同じくらい高くても広くてもよい。 – Tomalak

ボーダーが100％サイズ外です。試してくださいpadding: -1pxまたはmargin: -1px。

出典

2009-05-20 08:47:35

負のマージンはドキュメントからボーダーを引き出し、CSS仕様ではパディングは正でなければなりません。 – SpliFF

ここでは、html要素とbody要素のみを使用する簡単な解決策があります（入れ子divは必要ありません）。 HTML要素の特別な振る舞いを利用します（外側の枠線を持つことはできませんので、表示するには縮小する必要があります）。

<html> 
<head> 
<style> 
html {padding:0; margin:0; border:5px solid red;} 
body {height:100%; padding:0; margin:0; border:0;} 
</style> 
</head> 

<body> 

</body> 
</html>

出典

2009-05-20 08:57:17 SpliFF

ニース。私はこの点に関してHTML要素の「特別な特性」について知らなかった。知っておいてよかった。 – Tomalak

標準モードでは動作しないようです。 htmlの高さが再び崩壊し、100％に設定すると垂直スクロールバーになります。 – Tomalak

インターネットエクスプロイタを使用している必要があります。 4.01 Strict on FFで動作するので、おそらくブラウザのバグがあります。 – SpliFF

あなたはこれを愛するでしょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 

<style> 
html { 
    height: 100%; 
    width: 100%; 
    display: table; 
} 
body { 
    display: table-row; 
} 
#wrapper { 
    display: table-cell; 
    border: 5px solid red; 
} 
</style> 
</head> 

<body> 
    <div id="wrapper"></div> 
</body> 
</html>

http://www.test.dev.arc.net.au/100-percent-border.html

私は、テーブルにも標準モードの下で「風変わりな」行動の多くを保つため、彼らは解決策になるかもしれない考え出しました。 HTML要素をテーブルに変換するのはかなり面白いです。

これをIE6で動作しないとマークする前に、これを修正するのは非常に些細な問題だと考えてください。デフォルト（W3C）box modelは、「コンテンツ・ボックス」であるため、問題がある、

<table class="outer"><tr><td class="inner"> ...page content...

出典

2009-05-21 15:29:43 SpliFF

実際に動作するページ上の唯一のソリューションで、マークダウンされますか？ WTF？ – SpliFF

うーん.. IE6ではうまくいきませんね？それがIE7-jsの目的です。 – SpliFF

この作品**エクステント**。複数のdivが相対的に配置されている場合は、何らかの理由で最初のdivが大部分の領域を占め、他のdivは1ページ全体を占める代わりに画面のスライバーのみを占有します。この？！？！？！ – Anthony

それはまた少し醜いが、

position:relative; 
top:-1px; 
left:-1px;

を体を与える私のために働きました。

出典

2010-07-29 08:19:21 acme

これも試してみる価値があります。そしてちょうど*ちょっと*醜い、深刻ではない。 – Tomalak

身長およそ100％のボーダー（HTML 4.01 Strict）

答えて

関連する問題