0

ブラウザ ウィンドウが特定の幅に達するまで、サイドバーがビューポートの右側に 30% の幅 (コンテンツは左側) で固定されるサイトのレイアウトを作成しようとしています。コンテンツとサイドバーを中央に配置し、ブラウザー ウィンドウに合わせて大きくならないようにします (幅が非常に広いと読みにくくなるため)。使用されているhtmlのアイデアは次のとおりです。

<body>
<div id=sidebar>sidebar content</div>
<div id=content>articles, images, etc</div>

そして、これをフォーマットするために使用されている基本的な HTML の一部を次に示します。

#sidebar {
    width: 30%;
    position: fixed;
    right: 0;
    top: 0;
    background-color: gray;
}
#content {
    width: 70%;
    margin-right: 30%;
    max-width: 49em;
}

この時点で、コンテンツの幅が 49em を超えると、コンテンツはページの右側にくっつき、固定サイドバーとの間のギャップがますます大きくなります。私が望むのは、最大幅 49em に達し、サイドバーが 21em に達し (したがって、まだ 70:30 です)、固定されたままですが、70em 相当の幅全体がビューポートの中央に配置されるようにすることです。

また、サイドバーの背景色を、コンテンツの端から画面の右側まで全体に広げたいと考えています (つまり、サイドバーとコンテンツの両方を中央に配置し、最大幅 70em の div を含む場合はそうではありません)。サイドバーの背景は、ビューポートではなく、含まれている div の端にのみ移動するため、機能します)。これはそれほど重要ではありません。body 要素にある種のテクスチャ付きの背景を配置して、ページがテクスチャ付きの表面に「座っている」ように見せることができます (理想的ではありませんが、問題ありません)。サイドバーの固定位置を維持しながら、サイドバーとコンテンツを中央に配置できませんでした。

ありがとう！

更新：ここに私が探しているものの非常に大まかな概略図があります：

|A|B|C|D|

B は最大幅 49em のコンテンツ領域です。C は最大幅が 21em のサイドバーであり、位置を固定する必要があります。A と D は余白になります (ビューポート幅と 70em の差の半分ずつ)。D の背景は、サイドバーと同じ色 (灰色) にする必要があります。A の背景は白でなければなりません。

4

3 に答える 3

1

このソリューションはほとんどの要件を満たしていますが、コンテンツとサイドバーの幅を指定する必要があります（この場合、70emを配置します）

HTML：

<div id="container">
    <div id="content">articles, images, etc</div>
    <div id="sidebar">sidebar content</div>
</div>

CSS：

#sidebar {
    width: 29%; background-color: gray; border: 1px gold solid;
    float: left;
    position: fixed; right: 0; top: 0;
}

#content {
    width: 69%; max-width: 49em; border: 1px silver solid;
    float: left;
}

#container {
    max-width: 70em;
    margin: 0px auto;
}​

jsFiddleはこちら。（中央のフレームを左右にドラッグするだけでテストできます）</ p>

于 2012-04-03T22:27:01.237 に答える
1

このようなもの：

<body>
    <div id="wrapper">
        <div id="sidebar">sidebar content</div>
        <div id="content">articles, images, etc</div>
    </div>
</body>

これに似た CSS を使用すると、次のようになります。

body { background:url(imageForSidebar.png) right top repeat-y; }
#wrapper {
    max-width:1000px;
    margin:0 auto;
    background:#FFF url(imageForSidebar.png) -66% top repeat-y;
    position:relative;
}
#sidebar {
    width:30%;
    float:right;
    position: fixed;
}
#content { margin-right:30%; }

本体の背景画像は、画面の端までずっと処理されます。これを行うのに十分な大きさの背景画像を使用しますが、背景で覆われるほど十分に小さい背景画像を使用し#wrapperます。ラッパーの背景画像も同様に機能しますが、この場合は、サイドバーの画像が常にコンテンツの下部まで拡張されるようにするだけです。

于 2012-04-03T22:14:35.100 に答える
0

cssにメディアクエリを追加できます

//your normal css
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;}

//media query (you can add max and min width of the sceen or one of both)
@media screen and (min-width:500px) { 
    #sidebar{
       //css you want to apply when when width is changed
 }
}
于 2016-09-28T07:49:28.577 に答える