javascript - 画面の右側にサイドバーが拡張された中央レイアウト

Question

サイドバーの背景が右端まで伸びた固定レイアウトを作成しようとしています。イメージを説明するためにスケッチを描きました。

ここに画像の説明を入力

どのウィンドウサイズでも、サイドバーの背景を右側の画面の最後まで拡張するにはどうすればよいですか? 私は試しました：

#sidebar {
    z-index: 1000;
    overflow: hidden;
    position: absolute;
    width: 100%;
    background: url(../img/sidebar-base.png) no-repeat 0 -8px;
    min-height: 200px;
    &::after {
        content: '';
        z-index: 10;
        display: block;
        height: 100px;
        overflow: hidden;
        width: 100%;
        background: url(../img/sidebar-rx.png) repeat-x 0 -9px;
        position: absolute;
        top: 0;
    }
}

しかし、スクロールは横に表示さoverflow:hiddenれ、ボディに適用すると下までスクロールできません。ありがとうございました！

編集：私はjavascriptで運を見つけようとしましたが、まだ小さなスクロールがあります：

$(function(){
    $sidebar = $('#sidebar');
    $sidebar.css({width: window.innerWidth - ($sidebar.offset().left)})
});

score 0 · Accepted Answer

問題がスクロールのみにある場合は、この行で簡単に修正できます

overflow-x: hidden;

それを背景の親または body 要素に完全に適用します。

score 0 · Accepted Answer

ここをフォローしている人はいますか？とにかく、以下のように位置と隠しオーバーフローを静的にする必要があると思います。

#sidebar {
        z-index: 1000;
        overflow: hidden;
        position: static;
        width: 100%;
        height:100%;
        right:0;
        top:0;
        margin:0;}

また、スクロールを非表示にするには、ボディオーバーフローも非表示にする必要があります。

正しくて役立つことを願っています...

score -1 · Accepted Answer

あなたがすべきことはラッパーdivを作成することです。

<div class="sidebar-parent">
  <div class="sidebar"><!-- Stuff Here --></div>
</div>

終了すると、ドキュメントは次のようになります。

<html>
<head>
  <title>Experiment</title>
  <style type="text/css">
    .content {float: left; width: 49%; height: 500px; border: 1px solid #000;}
    .sidebar-parent {float: left; width: 50%; background-color: green;}
    .sidebar {width: 500px; height: 500px; border: 1px solid #000;}
  </style>
</head>
<body>
  <div class="content">blah blah blah</div>
  <div class="sidebar-parent">
    <div class="sidebar"><!-- Stuff Here -->blah blah blah</div>
  </div>
</body>
</html>

覚えておくべき主なことは、コンテナdiv "sidebar-parent"は、幅を取得し、背景を含むものです。

それらを中央に配置するにはwidth: 50%;、コンテンツとサイドバーの両方の親コンテナが必要です。それらfloat:left;を画面いっぱいに作成し、次にコンテンツの子コンテナfloat: right;とサイドバーの子コンテナfloat: left;を親コンテナ内に配置します。

概要：それぞれが1つの子コンテナーを含む2つの50％幅のコンテナー。左のフロートと一緒に親を積み重ねてから、固定幅の子コンテナを親の中に配置します。

これにより、それらが中央に配置され、背景を拡張できるようになります。

score -1 · Accepted Answer

本文を 100% に設定

body {
height: 100%;
}

次に、サイドバーの高さを「height: auto;」に設定します。これにより、ビューポートの高さまで拡張されます。そこから、あなたが言ったように固定位置を追加します。

score -1 · Accepted Answer

あなたがすることができます：

overflow-y:hidden

これにより、下部のスクロールバーが取り除かれます。

また、サイドバーを拡張するために、サイドバーで多くの右側のパディングを使用します。

score -1 · Accepted Answer

-1

サイドバーの幅を 30%、コンテンツを 70% に設定してみてください。

于 2012-10-10T19:07:50.363 に答える

javascript - 画面の右側にサイドバーが拡張された中央レイアウト

6 に答える 6

Related

Reference