1

ページの右側に配置された列があります。列はページの高さ全体にまたがる必要があるため、固定する理由は次のとおりです。列内に修正してはならない項目があります。アイテムで何をしても、ページのスクロールを続けます。

固定された親内で子divを静的にする方法、または固定位置を使用せずに列をページの高さ全体に広げる方法を誰かが持っていますか?

CSSは次のとおりです。

.rightCol{
   width: 28px; 
   position: fixed; 
   bottom: 0px; 
   top: 0px; 
   z-index: -1; 
   margin-left: 969px;
}
.rightColItem{
   margin-top: 95px;
   margin-left: 10px;
   position: absolute;
}​

そしてHTML：

<div class="rightCol">
   <div class="rightColItem">
      I want this to be static and not fixed
   </div>
</div>

そして、ここにフィドルへのリンクがあります-> http://jsfiddle.net/7hmKy/

どんな助けでも大歓迎です！

編集 1:右揃えのバーは、1000px のコンテナー div 内にあります。

4

1 に答える 1

1

マークアップも少なくて済む簡単な方法は、ページの背景に CSS3 グラデーションを使用することです。イメージ フォールバックを使用して古いブラウザをサポートすることも簡単にできます。

body {
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(100%, #fa8072), color-stop(100%, transparent));
  background: -webkit-linear-gradient(right, #fa8072 200px, transparent 200px);
  background: -moz-linear-gradient(right, #fa8072 200px, transparent 200px);
  background: -o-linear-gradient(right, #fa8072 200px, transparent 200px);
  background: linear-gradient(right, #fa8072 200px, transparent 200px);
}

.sidebar {
  width: 200px;
  float: right;
}

デモ( CSS3 グラデーションを更新しやすくするため、Sass とCompassを使用しました。)

編集：

あなたのコメントに基づいて、body幅1000pxの中心を使用して新しい例を作成し（divを使用できるいくつかの仕上げがあります）、グラデーションを変更して境界線を複製しました：

body {
  height: 100%;
  min-height: 2000px;
  width: 1000px;
  margin: 0 auto;
  background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(98.33333%, transparent), color-stop(98.33333%, #000000), color-stop(100%, transparent)), -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #000000), color-stop(83.33333%, #000000), color-stop(100%, transparent));
  background: -webkit-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -webkit-linear-gradient(right, #000000, #000000 10px, transparent 12px);
  background: -moz-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -moz-linear-gradient(right, #000000, #000000 10px, transparent 12px);
  background: -o-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -o-linear-gradient(right, #000000, #000000 10px, transparent 12px);
  background: linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), linear-gradient(right, #000000, #000000 10px, transparent 12px);
}

デモ

于 2012-11-11T04:02:14.173 に答える