1

いくつかの理由から、サイドバーを完全に右側に配置しています。しかし問題は、メイン コンテンツ領域が短い場合、サイドバーがコンテンツを超えてはみ出してしまうことです。

CSS を使用して、コンテナの高さをサイドバーの周りにラップさせる方法はありますか (サイドバーが長い場合)。

このjsFiddleをしてください：http://jsfiddle.net/52jjp/

4

3 に答える 3

2

悲しいことに、ストレートな CSS でこれを行う方法はありません。何かを絶対に配置すると、ドキュメント フローから削除されるため、親の高さには影響しなくなります。

@scott-brownがすでに提案しているように、javascriptで解決できます。

ただし、私はすべての CSS ソリューションを好みます。このマークアップを使用すると、どちらの側が長くてもクリアされるフロートを使用してサイドバー レイアウトを取得できます。

<div class="page">
  <div class="content">
    Primary content here.
  </div>
  <div class="sidebar">
    Sidebar content here.
  </div>
</div>

そしてこのCSS：

.primary {
  float: left;
  width: 66%;
}
.sidebar {
  float: right;
  width: 33%;
}
.page:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  zoom: 1;
}

のスタイル.pageは clearfix と呼ばれます (詳細はこちら)。

このレイアウト手法の優れた点は、マークアップを変更せずに と の列を に変更するだけで、.primaryとの列を交換できることです。.sidebarfloat:leftfloat:right

また、clearfix は、親要素に子が含まれることを意味するため、必要に.page応じて背景色を設定でき、長い方の列の一番下まで拡張されます。

于 2012-07-18T17:05:31.940 に答える
1

サイドバーの高さが固定の場合は、 または にmin-height{...}設定.main-contentできます。.pad

于 2012-07-18T16:41:34.377 に答える
1

絶対配置された要素を「クリア」するのは簡単ではありません。私が見つけた 1 つの方法は、jquery で高さを取得し、その高さをコンテナーに適用することです。例えば：

$('#container').height($('#ab_positioned').height());

于 2012-07-18T16:27:40.130 に答える