web-dev-qa-db-ja.com

htmlとbodyが高さであるにもかかわらず、Container Fluidの高さが100％ではない

私は次のレイアウトを持っています（Meteorを使用しています）：

<template name="headerFooter">
    <div class="container-fluid fill-height">
        {{> header}}

        {{> UI.contentBlock}}

        {{> footer}}
    </div>
</template>

<template name="home">
    {{#headerFooter}}
        <div class="row body-film">
            <div id="newsfeed" class="col-sm-offset-7 col-sm-5 block-film">
                {{#each stories}}
                    <div class="story">...</div>
                {{/each}}
            </div>
        </div>
    {{/headerFooter}}
</template>

そして、この（関連する）cssバックアップ：

html {
    height: 100%;
}
body {
    min-height: 100%
} 
.fill-height {
    height: 100%;
}

htmlおよびbody要素は両方とも期待どおりに動作しています。任意のズームレベルまたはサイズで領域を塗りつぶします。

ただし、container-fluidクラスが追加されたfill-heightは、ジョブを実行していません。内容をラップするだけで、底までは入りません。これは、body-filmとblock-filmをページに追加する責任があるため、これは問題です。これらは、全体を一定の色に統一するための単なる半透明の背景です。

以下は、コンテンツが高さいっぱいにならないようにページをすべて縮小したスクリーンショットです。

My page with nothing selected

ここでは、body要素が選択されています。ご覧のとおり、親をうまく埋めます。

My page with body selected

しかし、container-fluidはそうではありません。

My page with container selected

fill-heightでheightとmin-heightの両方を試しましたが、まったく同じように見えます。

あなたの助けに感謝します！

更新

私はこれらの3つの要素でmin-heightとheightのあらゆる組み合わせを試してみましたが、何も正しく動作しません。

コンテンツがビューポートに対して小さすぎる場合は3つすべてでheightが機能しますが、コンテンツがビューポートに対して大きすぎる場合、コンテンツブロックはbodyから完全にオーバーフローします。短すぎます。

3つすべてのmin-heightが最も論理的な方法のように思えますが、コンテンツが小さすぎると中断します。この場合、body要素はhtml親を埋めるために伸縮しません。

どうしたの！！！！？？？？？これは、新しい BlazeテンプレートエンジンMeteorが使用する のバグですか？

更新

height: inheritでfill-heightを試したところ、うまくいきませんでした。私は本当にロープの終わりにいます。これはとてもシンプルなはずです。

更新

申し分なく、私はわずかな変化を起こした。これでless：

.fill-height {
    min-height: 100%;
    height:auto !important; 
    height: 100%; 
}
.body-film {
    .fill-height();
}
.block-film {
    .fill-height();
}

container-fluidは完全な高さになりましたが、まったく同じmixinを使用しているbody-filmとblock-filmではありません!!

これはスクリーンショットで、row.body-filmを示しています。これはshouldフルハイトである必要があります。上のcontainer-fluidが（Wordを使って、container-fluidが体を埋めるために伸ばされます）。

The row is broken.

行のhtml宣言にfill-heightを手動で追加しても、何も変更されず、単にbody-film mixinを介してそれを受け取っているかのように動作します。

これらのmin-heightの要求のすべてに一部の要素がまったく応答しないのはなぜですか？

追伸、私はChromeを使用していますが、ubuntuマシンではであるため、矛盾があるかどうかはわかりません。

回答

次は動作しました：

html, body {
    height: 100%;
}
.container-fluid {
    height: 100%;
    overflow-y: hidden; /* don't show content that exceeds my height */
}
.body-film {
    height: 100%;
    overflow-y: auto; // a value of 'scroll' will force scrollbars, even if they aren't necessary. This is cleaner.
    background-color: fadeout(@studio-bar-color, @studio-body-film-trans-delta);
}
.block-film {
    min-height: 100%;
    overflow-y: hidden; /* don't show content that exceeds my height */
    background-color: fadeout(@studio-bar-color, @studio-block-film-trans-delta);   
}

overflow属性は非常に重要であり、以前はあまり知らなかったものです。 scroll値を体全体（上下に移動できるようにする必要があるもの）に与えることは答えでした。また、最も内側の要素（block-film）にmin-heightを与えて、それ自体が引き伸ばされるようにしました。すべての親要素。

htmlcsstwitter-bootstrapmeteorless
23
blaineh

あなたはすべての組み合わせを試したと言っていましたが、どうですか？

html, body {
    height: 100%;
}
.fill-height {
    min-height: 100%;
    height:auto !important; /* cross-browser */
    height: 100%; /* cross-browser */
}

ボディにmin-height: 100%を設定する際の問題は、子divのheight: 100%には実際に参照する適切な親の高さがなく、機能しないことです。

編集：

このロジックはすべての子divに適用されます。したがって、あなたの場合、body-film divはcontainer-fluidの子です。 container-fluidのmin-heightは100％であり、定義済みのheight（autoに設定されていない）であるため、body-filmに高さのパーセンテージを指定すると、参照する高さ。 MDN-CSS height および MDN-CSS min-height を読む価値があります。

つまり、高さまたは最小高さ100％のdivを使用する場合、そのすべての親要素は、htmlタグまでの定義済みの高さ100％を持つ必要があります。

あなたがする必要があるかもしれないことは、このようなものです：

html, body {
    height: 100%;
}
.container-fluid {
    height: 100%;
    overflow-y: hidden; /* don't show content that exceeds my height */
}
.body-film {
    min-height: 100%;
    overflow-y: scroll;
}

あなたが正確に望むものに依存するので、これは決定的な答えではないかもしれませんが、うまくいけばこれはあなたを正しい軌道に乗せるでしょう。

26
happyjack

これはhtmlのサイジングの問題に直接関係していませんが、最近、この種の「透明なフィルム」を実現するためのmuchより簡単な方法を発見しました。 box-shadow 。

この記事ではかなりうまく分解しています。 彼は他の方法も提供していますが、率直に言って、これは最も単純なようです。

<div class="example"></div>

.example {
    position:relative;
    width: 300px;
    height: 313px;
    box-shadow: 0px 313px rgba(255, 0, 92, 0.6) inset;
    background: url(/img.png);
}
0
blaineh