0

あなたの助けが必要です。私はグーグルで探し回っていますが、探している良いヒントが見つかりません。なのでここに書くことにしました。私の母国語ではない私の英語を許してください。

ブラウザーの解像度が異なる (大きい/小さいラップトップ画面) 全画面表示で CSS レイアウトを管理するのに苦労しています。HTML 本文はスクロールなしのフルスクリーンで完全に機能しますが、ラッパー (ピンク) はさまざまな解像度で制御不能に見えます: ラッパー (ピンク) は大きな画面 (1920 x 1200) に収まりますが、小さな画面 (1280) には収まりません。 x 800) スクロールを引き起こします。スクロールしたくない。スクロールせずにさまざまな解像度に収まるようにすべてが必要です。

私の簡単な html と css コードをカラー レイアウトで見ることができます。それらをコピーしてマークアップに貼り付けるだけで、何が問題なのかを確認できます。ピンクの 1 つに焦点を当てます。

CSS:

     <style type="text/css">
*{
    margin:0;
    padding:0;
}

html{
    /* This image will be displayed fullscreen */
    background:url('name.jpg') no-repeat fixed;

    /* Ensure the html element always takes up the full height of the browser window */
    min-height:100%;

    /* The Magic */
    background-size:cover;
}

body{
    text-align: center;  
    /* Workaround for some mobile browsers */
    min-height:100%;
}


section, footer, header{
    display: block;
}

footer{
    background-color: #111111;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.4);
    height: 45px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 100000;
}
</style>


HTML MARKUP
    <body>
        <div class="header_container" style="background-color:orange; height: 150px;overflow: hidden;">


        </div> <!-- end of header_container container_12-->
        <div id="wrapper" style="background-color:pink; height:100%">

        <div class="featured_container1" style="height: 280px;width:100%;background-color:grey;">

        </div>


        <div class="featured_container2" style="background-color:red; width:300px; height:700px">


        </div>
</div>    <!-- wrapper End -->
        <footer style="background-color:green">

        </footer>

    </body>
</html>

あなたの助けは非常に高く評価されます.あなたによってどのように解決されるかを楽しみにしています. このフォーラムに書き込む価値があることを願っています:)

よろしく

4

1 に答える 1

0

<div id="wrapper" style="background-color:pink; height:100%;">ピンクのラッパーのスクロール変更を停止するには<div id="wrapper" style="background-color:pink; height:auto;">

また、インライン CSS を使用せず、すべてをスタイルシートに入れることもお勧めします :)。

于 2013-04-29T20:00:17.283 に答える