-1

いつものように、私は自分自身を説明するのが難しいので、時間をかけて簡単なプレゼンテーションを作成しました: http://dl.dropbox.com/u/25916579/drawing.svg

最初はとても簡単に思えましたが、いつものように、私は頭がいっぱいです。JavaScriptが解決策になる可能性があると思いますが、気にしません。

Chrome と Firefox では機能するが、IE では機能しないソリューションを見つけました。

注意: 古いブラウザのサポートは気にしません。

問題を解決するための私の試みは次のとおりです: http://jsfiddle.net/fLGUh/

既に述べたように、私はクロムとファイアフォックスで実用的なソリューションを手に入れましたが、完全ではありません.

これを IE で見ると、一番下の #fill が期待どおりに動作していないことに気付くでしょう。

javascriptを使わないバッター方法をご存知でしたら教えてください。

よろしくお願いします。

編集: 楽しみのために、JavaScript ソリューションがどのように見えるかについていくつかの調査を行いましたが、最初に考えたほど簡単ではないようです。

edit2: この時点で、javascript ソリューションが唯一の方法である可能性があることを受け入れることを余儀なくされていると思います。本当にひどすぎる。私はjavascriptが苦手です...

edit3: 動作する js ソリューションが提示され、私の大きな欠陥が指摘されました。これを終わらせるために、時間ができたら後で戻ってきます。それまで、皆様に感謝し、よろしくお願いいたします。

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>
4

3 に答える 3

2

http://jsbin.com/afemaz/ - Chrome、Firefox、Opera、IE>=8 で動作します。あなたのソリューションとは異なり、ウィンドウが小さい場合、コンテンツの上部はトリミングされません。

于 2012-04-04T15:13:54.370 に答える
2

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現在利用可能な実際の表示スペースを保存します（ブラウザ間でいくつかの論争があると思います）。getElementByIddivにアクセスします。そのstyle.marginTop(およびmarginBottom) だけでなく、style.heightこれらの寸法を制御することもできます。

警告:

  • そうしないと、スクリプトは実行されますが、div がまだ存在していないため (無効になります)、スクリプトは div の下にある必要があります。
  • マージンはロード中に 1 回定義されます。後でウィンドウのサイズを変更しても、調整されません。
于 2012-04-04T15:22:58.643 に答える
1

Ok。元の jsfiddle を見て、塗りつぶし div で 270px のマージン制約を削除しようとしました。IE9 では、あなたの高さが一番上の塗りつぶし div よりもずっと大きかったのです。この制約を削除したところ、IE9 で適切に動作するようになりました。 http://jsfiddle.net/fLGUh/3/ ところで、IE7 でも同じように動作します。

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

于 2012-04-04T16:06:50.163 に答える