0

以下に示すように、2つのdivがあります。

<div class="header">
    <h1>My Cool Site</h1>
</div>

<div class="main">
    Hello world
</div>

ヘッダー div は、必要なだけのスペースを取る必要があります。メイン div は残りのページの高さを正確に埋める必要があります。スクロール バーは表示されません。これはCSSのみで可能ですか？JavaScript はありません。これが私の失敗した試みです: http://jsfiddle.net/nareshbhatia/HrsHR/

編集: jsFiddle を少し変更して、コンテンツ領域を高さいっぱいまで拡大する必要があるという意図を明確にしました。「メイン」のコンテンツは、div の全領域に広がる SVG 要素に置き換えられました。

4

3 に答える 3

0

calc()を使ってみてください

実施例

.main {
    background-color: #BAA378;
    border: 10px solid #453823;
    padding: 10px;
    height: calc(100% - 60px); /* 100% - height of header */
}

または、それを削除して jQuery を使用することもできます。

実施例2

 layout = (function () {
     var w = $(window).height();
     var h = $('.header').outerHeight();
     var x = w - h;
     $('.main').outerHeight(x);
 });

 $(document).ready(layout);
 $(window).resize(layout);
于 2013-06-15T06:24:27.960 に答える
0

コンテンツの代わりにラッパーを使用して境界線を作成することで、必要な外観を作成できます。次に、コンテンツ div は高さ全体を占有しませんが、ヘッダーの下の通常の場所に表示され、高さに合わせてトリミングされoverflow: hidden;ます。ヘッダーをラッパーの境界線の上に配置するための少しの不正行為により、少なくとも外観に関して必要なものが得られます。

http://jsfiddle.net/AjtFc/3/

于 2013-06-16T02:26:21.327 に答える