HTML/CSSのボックスモデル構造、中心とスタッフ

-1

いつものように私は私の自己を説明する難しさを持っているので、私は少しプレゼンテーションを作成するための時間をとってきました： http://dl.dropbox.com/u/25916579/drawing.svg HTML/CSSのボックスモデル構造、中心とスタッフ

それはそもそもそう簡単に見えたが、いつものように、私はここで私の頭の上にいる。私は、javascriptが解決策になるかもしれないと思うが、私はそれを気にしない。

私は、chromeとfirefoxでは動作するが、IEでは動作しない解決策を見つけました。

NB：古いブラウザのサポートは気にしません。ここで

は、問題を解決するために私の試みです： http://jsfiddle.net/fLGUh/

をすでに述べたように、私はChromeとFirefoxで作業溶液を得ましたが、それはまさに完璧ではありません。

IEでこれを調べると、下部の#fillが期待どおりに動作しないことがわかります。

ジャバスクリプトを使用していないバッター方法について知っていれば教えてください。

よろしくお願いいたします。

編集：ちょうどそれの楽しみのために、私はJavaScriptのソリューションがどのように見えるかについていくつかの研究を行い、明らかにそれは私が最初に考えたほど簡単ではないので、大歓迎です。

edit2：この時点で、私はjavascriptの解決策が唯一の方法かもしれないと受け入れることを余儀なくされると思います。それは本当に悪いです。私はjavascriptで吸う...

edit3：作業中のソリューションが提示され、私の大きな欠陥が指摘されています。後で私は時間があるときにこれを終えるために戻ってきます。それまでは、ありがとうございました。

edit4：この私が探していたまさに行います

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
$(
    function() { 
    var wh = $(window).height(); 
    var m = (wh-540)/2; 
    if(wh > 540) { 
     $('#content').css('margin-top', m).css('margin-bottom', m); 
    } 
    } 
); 
</script> 
<style type="text/css"> 
html, body { 
    margin: 0px; 
    padding: 0px; 
    background-color: black 
} 
#content { 
    width: 960px; 
    min-height: 540px; 
    background-color: #eeeeee; 
    margin-left: auto; 
    margin-right: auto; 
} 
</style> 
</head> 
<body> 
<div id="content">test</div> 
</body> 
</html>

出典

2012-04-04 Zacariaz

達成しようとしていることは何ですか？私はあなたが何かを垂直に中心にしたいという印象を受けているように思えるので、「気にしない」javascriptはちょっとばかげているようですね。これは（効果的に行うために）通常は何らかの種類のjsを必要とします。私はあなたが何をしようとしているのかまだかなり確信していません。 –

私は私が説明したことを正確に達成しようとしています。私が十分な仕事をしていない場合は、あなたが理解していないことを正確に教えてください。まさに私がJavaScriptを気にしないのは、長くて無関係な話ですが、私がすでにそれを使わずに問題を解決するのにとても近づいてきたので、私はそれが実際に可能であることを願っています。 – Zacariaz

あなたの説明は仕様書のドキュメントにすぎませんが、何をしようとしているのかは説明していません。説明してください。 – chadpeppers

です。オリジナルのjsfiddleを見て、fill divの270px marginの制約を取り除こうとしました。これは、IEのbottom fillが誤って動作していると言いました。 IE9では、あなたの身長は、トップフィルのdivよりも大きかったということを、私はあなたが何を意味するのか見ています。私はこの制約を取り除き、IE9で適切に動作するようになりました。 http://jsfiddle.net/fLGUh/3/ところで、IE7でも同じように動作します。

また、div id = "fill"はclass = "fill"である必要があります。

出典

2012-04-04 16:06:50 huzzah

Doh、id VSクラス用。それだけで問題になるかもしれませんが、もちろんさらなるテストが必要です。ただし、ビューポートの高さの50％の上端/下端にマージンがあるため、あまり役に立ちませんが、あまり役に立ちません。 50％のビューポート - 50％のコンテンツの高さが私が探しているものです。 – Zacariaz

さて、私はjs解決策はあなたが向かうものだと思う;） – huzzah

ええ、問題は私がばかだということです。私は何時間も問題を研究しています。本当にシンプルです：if（viewportHeight <= 540）elementMarginTop = 540; else elementMarginTop =（ViewportHeight-540）/ 2;しかし、javascript、DOM、そしてすべてのことは私に同意しない。それを言う簡単な方法はありません。私はばかだ... – Zacariaz

http://jsbin.com/afemaz/ - クロム、Firefoxの、オペラやIE> = 8で動作します。ソリューションとは異なり、ウィンドウが小さい場合はコンテンツの上部を切り取らない。

出典

2012-04-04 15:13:54

申し訳ありませんが、そうではありません。コンテンツ領域の高さが増加すると、上下のマージンが減少しますが、これは意図的なものではありません。 – Zacariaz

ビューポートの高さとコンテンツ領域の最小高さを使用して定義されたマージン：http://jsbin.com/ogahiq使用方法を知ることは興味深いでしょう。 –

現実世界ではうまくいくとは思えませんが、それは大したことです。この時点で私は実験をしています。とにかく、実際にあなたの例で最小の高さを持っていないコンテンツエリアから離れて、それは私が探していたものを正確にするようです。結論を出す前にまだテストするべきことがいくつかありますが、あなたは今日の大きな救世主だと思われます。今すぐ誕生日に選んでください。しかし、これを終えるために後で戻ってきます。 – Zacariaz

変数の高さを中心に垂直にセンタリングすることはHTML/CSSだけでは不可能です.JSが必要です。あなたが試すことができますどのような

は次のとおりです。（私は考えるブラウザ間でいくつかの論争で）

<div id="mydiv" style="width:960px; height:540px; margin:10px auto;"> 
<script type="text/javascript"> 
    var d = document.getElementById('mydiv'); 
    var h = window.innerHeight; 
    if(h > 560) //window is smaller: use the minimal settings as defined in style 
    { 
     d.style.marginTop = (h - 540)/2; 
    } 
</script>

window.innerHeightストア実際の現在利用可能な表示スペース。 getElementByIdがdivにアクセスします。 style.marginTop（およびmarginBottom）とstyle.heightを使用すると、これらの寸法を制御できます。

警告：

スクリプトは、そうでない場合、スクリプトが実行されますようdivの下にする必要がありますが、div要素は、（それが無効になるもの）はまだ存在していません。
余白は読み込み中に一度定義されます。後でウィンドウのサイズを変更すると、調整されません。

出典

2012-04-04 15:22:58 Armatus

すみません。しかし、これは私にとってはうまくいかないようです。コードを見れば、私はそれが必要なので多かれ少なかれ動作するはずですが、明らかに影響はありません。気にして、私はそれがjsになるとばかげています。 – Zacariaz

IE8以下を使用していますか？ W3Schoolsによると、これは 'window.innerHeight'をサポートしていない唯一のブラウザです。 – Armatus

現在、私はクロムを使用していますが、IE8のサポートが必要な場合があります。実際にどれくらいの人がそれを使っているのかよく分かりません。とにかく、私は何か間違っているかもしれない。私はすべてのjs noobの後です。 – Zacariaz

HTML/CSSのボックスモデル構造、中心とスタッフ

答えて

関連する問題