0

Divをウィンドウの100％に設定するのに問題があり、これを理解するのに助けが必要です。

これが省略されたhtmlです...

<div id="full-slider-wrapper">
  <div id="full-slider">
    <div class="slide-panel active">
       CONTENT
    </div>
  </div>
</div>

そしてここに関連するCSSがあります：

/*SLIDER
===================================
*/

#full-slider-wrapper {
    overflow: hidden;
}

#full-slider {
    position: relative;
    width: auto;
    min-height: 1250px;
    margin: 0 auto;
}

#full-slider .slide-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    visibility: hidden;
}

#full-slider .slide-panel.active {
    visibility: visible;
     }

私はmin-heightを使用しています：1250px; 回避策として、SKELETONテーマを使用しており、ウィンドウのサイズを変更すると、コンテンツが縮小し、コンテンツとフッターの間に大量の空きスペースが残ります。

同様の質問がたくさんあることは知っていますが、どの解決策も機能しないようです。私の最善の選択肢は、以下のようなjQueryを利用することのようです。

$(function() {
    $(window).resize(function() {
        $('div:full-slider').height($(window).height() - $('div:full-slider').offset().top);
    });
    $(window).resize();
});

残念ながら、私はjQueryにあまり精通しておらず、上記または同様のものを実装しようとすると、コンテンツが表示されなくなります。

助けてくれてありがとう！

4

3 に答える 3

2

すべての親 (祖先) が高さを定義していない限り、パーセンテージの高さは機能しないため、以下を追加します。

html, body, #full-slider-wrapper, #full-slider { height:100%; }

height:100%if there の他のすべての祖先にも追加し#full-slider-wrapperます。

もちろん、フッターがある場合は、高さのバランスをとってフッターのスペースを確保する必要があります#full-slider-wrapper { height:90%; }。

于 2013-01-10T21:24:30.167 に答える
2

このような状況は、すべての位置を絶対的なものにするのに最適ですが、4 つの位置すべてに名前を付けます。例：

#full-slider {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

この特定のものは $full-slider をその親の端に強制しますが、ロジックはすべてに適用されます。フッターの高さを 50px にしたいですか? 下:50px を実行します。必要に応じて変更してください。

于 2013-01-10T21:59:23.407 に答える