固定画像とコンテンツはスクリーンの解像度/ウィンドウサイズが減少するにつれて、固定サイドバーの重なりを重複します。

StackOverflow https://stackoverflow.com//questions/25081585

質問

次の構造のページがあります。

<body>
<div id="page">
    <div id="header-container">
        <header>
        </header>
    </div>

    <div id="main-container">
        <div id="main" class="site-main">
            <div id="sidebar-container">
                <div id="sidebar">
                </div>
            </div>

            <div id="content-container">
                <div id="main-banner-container">
                    <div id="main-banner-holder">
                        <img id="main-banner" src="http://dummyimage.com/900x300/000/fff" />
                    </div>
                </div>
                <div id="content" class="content" role="main">
                </div>
            </div>
        </div>
        <div id="footer-container">
            <footer>
                <div id="footer-images">
                </div>
            </footer>
        </div>
    </div>
</div>  
</body>
.

と以下のCSSでフォーマットされている：

body {
    margin: 0 auto;
    width: 70%;
    background-color: rgb(0,114,187);
    font-family: verdana;
}

#header-container {
    padding-bottom: 15px;
    padding-top: 20px;
    padding-left: 35px;
    padding-right: 35px;
    height: 190px;
}

header {
    position: fixed;
    width: 66%;
    padding-top: 30px;
    top: 0px;
}

#sidebar-container {
    height:500px;
    width:320px;
    float:right;
}

#sidebar {
    position: fixed;
    color: rgb(211,34,52);
    padding: 10px;
    right: 16.5%;
    top:226px;
}

#content-container {
    width: 72%;
}

#main-banner-container {
    max-width: 900px;
}
.

ワイドスクリーン上のページの表示コンテンツを罰金に表示します。ただし、ウィンドウサイズを小さくするか、またはより低い解像度の画面上のサイトを表示すると、その下の固定画像とその下のテキストはサイドバーを不明瞭にし始めていますが、少しスケールを縮小します。さらに、ページがスクロールしているとき、一部のテキストがサイドバーのスペースを作るために移動しても、下のテキストはスクロールしたときに重なります。

問題の概略例はここで見ることができます：> http://jsfiddle.net/4wqzp/

どのような変更を加える必要がありますか？

編集：明確にするために、私はプレーンなCSS / HTMLベースの修正を願っていました。JavaScriptはオプションですが、これまでこのサイトでそれを本当に使用していないのでそれを避けようとしています。

役に立ちましたか？

解決

Adaptive Designを使用するための2つの方法を使用するためのもの））、最初は bootstrap フレームワークを使用することです。書き込みメディアクエリ

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top