1

ウェブサイトで Google Maps API を使用しています。ウィンドウの幅を縮小しようとすると、フッターが地図に隠れてしまいます。私の目的は、マップとフッターの間に空白を追加することです。

大きなウィンドウでの結果:http://jaboste.dyndns.org/tmp/footer1.png

小さいウィンドウでの結果:http://jaboste.dyndns.org/tmp/footer2.png

ページの HTML コード:

<section class="contact">
    <article class="contact">
        <h3>Lorem ipsum</h3>
        <p>Lorem ipsum dolor sit amet</p>
        <div class="carte">
            <div id="map_canvas" style="width: 100%; height: 100%; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
                <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
                </div>
            </div>
            <p></p>
    </article>
</section>
<footer>
    <p class="align-droite">
        <span>Lorem ipsum</span>
        Dolor sit amet
    </p>
</footer>

</body>
</html>

ページの CSS コード:

footer{
        width:100%;
        font-family:'karla';
        text-align:right;
        margin-top:1%;
}
.carte{
        height:95%;
        margin-bottom:3%;
}

マージン プロパティを追加しようとしましたが、何も機能しませんでした。解決策はありますか？

4

1 に答える 1

0

ヘッダー、フッター、本文の CSS フレームワークについては、 jsfiddleを参照してください。css は、支援するためにコメントされています。Jsfiddle を使用すると、css 値を変更し、実行ボタンで変更を表示できます。

于 2012-09-17T14:32:08.950 に答える