3

私はレスポンシブ レイアウトに取り組んでおり、ウィジェットを固定/スティッキーのままにしたいと考えています。つまり、ページを下にスクロールしてもウィジェットが追従します。

簡略化された HTML:

<div class="page">
    <div class="content"></div>
    <div class="sidebar">
        <div class="widget1"></div>
        <div class="widget2"></div>
    </div>
</div>

CSS:

.page {
    width:96%;
    max-width:1000px;
    margin:0 auto;
}
.content {
    width:65%;
}
.sidebar {
    width:28%;
    float:right;
}
.widget1 {
    position:fixed;
    padding:7.15%; /* 20px of 280px */
    z-index:10;
}

問題: widget1を追加することでフローから除外されposition:fixedます。これにより、パディングの割合が本文から計算され、レイアウトが完全に台無しになります。フローから削除されたため、サイドバーの幅を 100% 占有することもなくなりました。

私が必要とするもの：（パディングwidget1のパーセンテージで）の全幅に収まるようにしsidebarます。

私が見つけた最も近い解決策はwidth:inherit、固定要素を追加することを提案しています。これはうまく機能しますが、親の幅がパーセンテージではなくピクセルで設定されている場合のみです。また、パディングを追加する必要があるという事実にも役立ちません。

洞察や提案をいただければ幸いです。私は CSS ソリューションを好みますが、jQuery の使用に反対しているわけではありません。

それが役に立てば、私は Twenty Ten に基づくレスポンシブ テーマに取り組んでいます。サイトはこちら: http://odin.reaktortest.no/hvorfor-velge-fixit/ 固定しておきたいベージュのボックスです( #iwajax_contact_widget-2)。

4

2 に答える 2