1

これはまだ使っても大丈夫ですか？古いブラウザで防弾するにはどうすればよいですか?

height: -moz-calc(100% - 70px);
height: -webkit-calc(100% - 70px);
height: calc(100% - 70px);

これが具体的に私が達成しようとしていることです。

  1. 全幅/固定高ヘッダー
  2. 全幅と全高からヘッダーの高さを差し引いたものを伸ばす Slider 。
  3. スライダーの縦横中央に配置された見出しブロック
  4. スライダーの下部から常に一定の高さである Controls ブロック

これまでに達成できたもののイメージを次に示します。上記の太字の部分を除いて、ほぼ完璧です。スライダー (黒い領域) は現在 100% の高さで伸びており、ヘッダーの後ろに流れています。これは画像には適していません。

CSS レイアウト

パディングまたはマージンを追加すると、スライダーの高さが 100% を超えて拡張され、スクロールバーが表示されます。上記の高さの計算を使用すると修正されるようですが、私の理解でcalc()は、IE 7、IE 8、iOS 5 以下、または Android と互換性がありません。

この問題のより良い修正はありますか? jQuery は問題ありませんが、存在する場合は CSS ソリューションを使用したいと思います。

ここに私のHTMLがあります:

<div class="header">
    <h1>Header - Full Width + 70px Height</h1>
</div>

<div class="slider">
    <div class="headline">
        <div class="headline-container"><!-- for table-cell vertical centering -->
           <h1>Headline Block</h1>
            <p>Centered Horizontally &amp; Vertically in the Slider Block</p>
       </div>
    </div>

    <div class="controls">
        <h2>Controls - Centered Horizontally &amp; 40px from bottom of container</h2>
    </div>
</div>

ここに私のCSSがあります:

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

h1, h2, p {
    margin: 0;
    padding: 0;
}

.header {
  position: absolute;
  width: 100%;
  height: 70px;
  background-color: #888;
  z-index: 9999;
}

.header h1 {
  color: #fff;
  text-align: center;
}

.slider-desc {
    color: #fff;
    text-align: center;
    margin: 15px 0 0;
}

.slider {
  width: 100%;
  height: 100%;
  background-color: #000;
}

.headline {
    display: table;
    width: 100%;
    height: 100%;
}

.headline-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.headline-container h1, .headline-container p {
    background-color: #fff;
}

.controls {
  position: absolute;
  width: 100%;
  bottom: 40px;
  text-align: center;
  background-color: yellow;
}

最後に、いじりたい場合に備えてフィドルを作成しました。助けてくれてありがとう！

4

4 に答える 4

0

単純なバニラ JS の一部がこれに使用できます (jQuery は、このような小さなタスクをロードするのが面倒です)。

document.getElementsByClassName("slider")[0].style.height = window.innerHeight - 70;

そして明らかに、それを上から配置する必要があります70px。
また、ウィンドウのサイズ変更をリッスンすることも忘れないでください:

window.onresize = function () {
    // Code above
}

本当に jQuery が必要な場合は、

$(".slider").height($(document).height() - 70);
$(window).resize(function () {
    // Code above
});
于 2013-07-25T20:24:28.773 に答える