0

ユーザーアプリケーション用の流動的なCSSレイアウトがあります。目標は、大きなコンテンツ領域（白）と濃い青の#notiareaがクライアントデスクトップ全体に拡大することです。目標は、＃notiareaを展開して、ユーザーデスクトップの残りの部分を埋めることです。

#notiareaとcontentdivには、下の画像のようなコンテンツ用のスクロールバーがあります。

私の質問は、darkblue（#notiarea）要素をアプリケーションビュー領域の残りの高さだけに拡張するにはどうすればよいですか？cssタグ「overflow：auto;」を使用する機能が必要な場合よりも、すべての固定高さ要素の下で#notiareaの高さを流動的にするにはどうすればよいですか？私はcssソリューションを好みますが、jQueryソリューションを受け入れます。

例

ソースコード：簡単な実験のためのjsfidleは次のとおりです：http：//jsfiddle.net/YLZRb/

4

3 に答える 3

1

説明なしで（コードがそれ自体を物語っていることを願っています）私はあなたに意味論的アプローチを与えます。

http://jsfiddle.net/YLZRb/6/

<header>

</header>
<div class="content">
    <aside>
        <section class="post">

        </section>
    </aside>
    <section class="main">

    </section>
</div>

とcss

html,body{
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}
body {
    background-color: #a3badc;
}
header {
    background-color: #515c6e;
    height:67px;
    box-shadow: rgba(0, 0, 0, 0.746094) 0px 5px 5px 0px;
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 9999;
}

.content {
    height: 100%;

}
.content aside {
    position: fixed;
    background-color: #032d3b;
    width: 230px;
    height: 100%;
    top: 67px;
    left: 0px;
}
.content aside .post {
    width: 100%;
    height: 220px;
    background-color: #1d779c;
}
.main {
    margin-top: 67px;
    display: inline-block;
}

</ p>

</ p>

于 2012-09-23T01:01:49.733 に答える
1

デモ：http ：//dabblet.com/gist/3768929

この結果を取得するには、非常に便利な'box-sizing：border-box'プロパティを使用します。これについては、paulirish.com / 2012 /box-sizing-border-box-ftw/を参照してください。

IE8 +と互換性があり、IE7以下のレイアウトを少し調整する必要があります。あなたはサイドバーに'位置：絶対'を与える​​ことができます...それは（あまり面倒なことなく）できる最高のものです。

さて、私はこれまでに何億回も同様のレイアウトを作成しましたが、ボックスサイズのプロパティにこれ以上感謝することはできません。変更点の簡単なレビューは次のとおりです。

#sidebarの「padding-top」値は#newpostcreatorの高さに等しくなりました。次に、＃newpostcreatorは、高さに等しい値（この場合は-206px）を使用して、負のトップポジショニングを使用して元の位置に戻されます。

'*'ユニバーサルセレクターを使用して、すべての要素' position：relative'も指定したことに注意してください。これは、ページ上に絶対位置の要素が複数ある場合に非常に便利です。そのため、それぞれのコンテナごとに相対位置を指定する必要はありません。これは主にDRY（Do n't Repeat Yourself）であり、よりクリーンなコードになります。これにより、すべての要素に「上」「左」「右」および「下」を介した追加の位置制御も提供されます。

また、＃sidebarは'position：fixed'であるため、レイアウトから削除され、ビューポートを基準にして配置されます。そのため、ページのコンテンツを中断/オーバーラップせずに静止させるために、いくらかの空白スペースが必要です。これを行うには、＃containerにサイドバーの幅に等しい左のパディング値を指定します。しかし、私はあなたがすでにあなたのフィドルでそれをしているのを見ました。私はそれを少し洗練しました。

サイドバーに戻って、206ピクセルのパディングトップを付けることについて説明しました。この背後にあるロジックを理解するには、レイアウトにおけるボックスサイズの役割を理解する必要があります。基本的に、「border-box」の要素には、パディングと境界線がすべてコンテナ内に配置されています。したがって、要素を指定する幅に関係なく、パディング/境界線を追加しても、最終的な幅/高さは追加されません。その中に含まれます。これはマージンでは機能しないことに注意してください。

したがって、サイドバーに残っているスペースから206pxのパディングを差し引いたスペースは100％であり、これを#notiareaに割り当てます。

それはほとんどそれです。コードを研究すると、私が提供できたものよりも理解が深まります。リンクを確認してください。古いバージョンのFirefox、Opera、Chromeのボックスサイズにベンダープレフィックスを追加することを忘れないでください。

于 2012-09-23T05:39:41.363 に答える
0

さて、ここに行きます.. http://jsfiddle.net/Ghcgr/

Jsfiddleにはiframeプロパティが原因でcssの問題があり、cssは独立したページで機能します。必ず確認してください。clear[サイドバーfloatとwidthajxpage]

于 2012-09-22T23:57:23.727 に答える