2

メイン コンテンツ エリアを残りのスペースの 100% の高さにしたいレイアウトがあります。だから私はほとんどそこにいますが、下が切り捨てられています（ズームとセンタリングに影響します）. 切り捨てられている下から 41px があります。これは、ヘッダー領域の測定値です: http://jsfiddle.net/GTscW/

切れているかどうかわかるのは、Google マップの著作権情報が表示されないためです。これは切り捨てられていませんが、上部を切り捨てています (上部を削除しただけです: #content .inner-content から 41px): http://jsfiddle.net/GTscW/1/

最初のサンプルの下部から 41px を差し引いて、残りの領域の 100% のコンテンツを取得するにはどうすればよいですか?

編集：

これだけを追加することができました: $('#content .inner-content').height($(this).height() - $('#header').height()) しかし、実際にはCSSソリューションはありません???

4

3 に答える 3

0

1つの問題は、画面サイズが異なれば動作も異なるため、パーセンテージとピクセル測定値を混在させるのは簡単ではないということです。ただし、API機能を使用して、任意のサイズの画面でマップを希望どおりに動作させることができます。

マップを画面サイズの100％にして、ヘッダーがマップの一部を覆い隠してしまうようにします。デフォルトのマップコントロールを抑制して、部分的に隠されて表示されないようにします。ヘッダーと同じサイズの空のカスタムコントロールを作成し、マップの上部に配置します。マップコントロールが追加されると、カスタムコントロールはそれらを通常の場所から押し出し、表示されているマップ上で正しく表示されるようにします。

var posn=google.maps.ControlPosition; // shorten the reference

// Add empty custom control
var controlDiv = document.createElement('div');
controlDiv.style.width='100%';
controlDiv.style.height='41px';
map.controls[posn.TOP_LEFT].push(controlDiv);
map.controls[posn.TOP_RIGHT].push(controlDiv);

// Add map controls
map.setOptions({
    mapTypeControlOptions:{position:posn.RIGHT_TOP},
    mapTypeControl:true,
    panControlOptions:{position:posn.LEFT_TOP},
    panControl:true,
    streetViewControlOptions:{position:posn.LEFT_TOP},
    streetViewControl:true,
    zoomControlOptions:{position:posn.LEFT_TOP},
    zoomControl:true
})

http://jsfiddle.net/GTscW/4/

注1：マップは実際には見た目より41ピクセル大きいため（この場合）、中心点は表示可能なマップの中心より20ピクセル高くなります。これは心配する価値がないかもしれません。もしそうなら、見かけの中心点を扱うことは、SOに関する別の質問の主題です。

注2：Googleロゴと規約のリンクは常にマップの下部にあり、[現在]コントロールを回避するために移動しないため、この方法は固定フッターを取得するためには機能しません。

于 2012-07-08T08:34:53.963 に答える
0

CSSでのみ、トリックを使用することができます:私があなたのフィドルで行ったように、プロパティで両方topとbottom属性を使用します: http://jsfiddle.net/GTscW/23/position: absolute

ただし、どこでも機能するかどうかはわかりません。

于 2013-05-06T12:15:15.783 に答える
0

私はあなたのフィドルを解決策で編集しました：http://jsfiddle.net/T2Nkk/

基本的に、次のような関数を作成します。

function remainder() {
    $("*[height=\"remainder\"]").each(function(index, element) {
        var offsetParent;
        var target = $(element);
        if (element==$("body")[0]) {
            offsetParent = $("html");
        }
        else {
            offsetParent = target.offsetParent();
        }
        var position = target.position();
        var heightParent = offsetParent.height();
        var extras = target.outerHeight(true)-target.height();
        var remainderHeight = heightParent-position.top;
        target.height(remainderHeight-extras);
    });
}

ページの残りの部分を占める要素については、次のようにします。

<div id="content" data-role="content" height="remainder">

最後に、ドキュメントの準備ができたら:

$(document).ready(function() {
    remainder();
});
于 2012-07-08T12:35:50.143 に答える