0

だから私はこのレイアウトを作成しようとしています。

これは、ページを構成する 3 つの「ボックス」の写真です: https://dl.dropbox.com/u/9699560/layout.jpg

そして、ここに私の試みがあります: https://dl.dropbox.com/u/9699560/map.html

赤いボックスは Google マップなので、高さが指定されていない場合は縮小されてゼロになります。私がやろうとしていることは次のとおりです。

緑色のボックスは固定幅、固定高です。青いボックスはページの垂直方向の高さの 20% を占める必要があり、最大高さは 100 ピクセルです。赤いボックスは、残りの垂直方向のスペースをすべて占有する必要があります。

誰かがそれを理解できる場合は、ブラウザウィンドウを垂直に拡大し、青いボックスの上部が緑のボックスの下部のレベルに達すると、左に拡大してページの 100% を占めるように、もう少し進めたいと思います。幅。

浮動小数点数、絶対位置、相対位置を試しましたが、これを純粋な CSS で動作させることはできません。やむを得ない場合は JavaScript を使用しますが、それが唯一の選択肢でない限り、それは避けたいと思います。

ありがとう！

これが試みです（使用する場合はコメントを削除してください）：

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

#nav {
    position: relative;
    width: 200px;
    height: 400px;
    background-color: green;
}

#map {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    height: 80%; // If #footer is 200px, should occupy all available space
    background-color: red;
}

#footer {
    position: absolute;
    left: 200px; // Should "become" 0 when window height pulls it past #nav
    right: 0;
    bottom: 0;
    height: 20%;
    max-height: 100px;
    background-color: blue;
}

そしてHTML

<html>
    <head></head>
    <body>
        <div id="nav"></div>
        <div id="map"></div>
        <div id="footer"></div>
    </body>
</html>
4

1 に答える 1

0

私の意見では、これを実装するにはJavaScriptが必要です。

私の出発点はおそらくこのマークアップからであり、サイズ変更時に起動するイベントハンドラーに最小/最大の高さの動作を実装する可能性があります：

CSS

html, body { margin: 0; padding: 0; }
#nav { background-color:green; width: 200px; height: 400px; float:left; }
#map { background-color:red; height: 80%; margin-left: 200px; }
#footer { background-color: blue; height:20%; }

HTML

<div id="nav">nav content</div>
<div id="map">map content</div>
<div id="footer">footer content</div>
于 2010-08-08T01:53:34.543 に答える