0

タイトルが説明的すぎて申し訳ありませんが、私はそれをどのように言えばいいのかわかりませんでした. 問題は：

レイアウト

1 と 2 は、背景グラフィックのみを含む div で、幅と高さが固定されています。

3 と 4 にも背景グラフィックを含めたいのですが、動的な高さがあります。これは、コンテンツが多い場合、追加コンテンツに比例して 3 と 4 が高くなることを意味します。また、3 と 4 は常にフッターに触れる必要があります。

おそらくこれは簡単なことだと思いますが、その場所に 3 と 4 を配置するのに苦労しています。これに必要なhtml/css構造、またはこれを達成する方法は何ですか?

追加した：

基本コード- 領域 1 と 2 の下には、コンテンツ領域のサイズに関係なく、フッターでそれらを結合する領域 3 と 4 が必要です。

4

2 に答える 2

2

これを行うにはおそらくもっと簡単な方法がありますが、兄弟の動的な高さに合わせて列を下に伸ばすのは難しいので、私はしばしば絶対配置に頼っています。

列に 3 つの div を作成して、1) ダイアグラムの div #1 と #3、2) 動的コンテンツの div、3) ダイアグラムの div 2 と 4 を含めます。

これら 3 つを div 内に配置します (これに「all」の ID を付けました)。このコンテナーに clearfix スタイルを適用します (CSS の最後で定義されたスタイル)。position:relative をこの div に適用します。また、このコンテナーの幅を 3 つの列を含むように正確に設定する必要があります (3 番目の絶対位置の列を適切に考慮する必要があります)。

設計に従って 3 つの列のそれぞれの幅を固定し、最初の 2 列をフロートにします。ただし、3 列目は position:absolute にします。上に設定: 0px; 下:0px;右:0px;

次に、必要な比率に従って、パーセンテージで内部の 2 つの div の高さを設定します。

私のソリューションにはかなりのものが含まれています。そのため、コードを jsfiddle に保存しました: http://jsfiddle.net/feaLC/5/

動的コンテンツ エリアのテキストの量を調整して、その動作を確認します。

更新-- 質問者の説明に基づいて完全に改訂されました。

これを達成するには、左右の列を絶対的に配置し、次に 2 番目の div をこれらの 2 つの列のそれぞれの内側に絶対的に配置して、一番下まで伸ばします。

参照: http://jsfiddle.net/feaLC/6/

HTML:

<div id="header"></div>
<div id="all" >
    <div id="leftCol">
    <div id="left1"></div>
    <div id="left3"></div>
    </div>
    <div id="content">text text text text text text 
            text text text text text text text text text text text text 
            text text text text text text text text text text text text 
            text text text text text text text text text text text text 
            text text text text text text text text text text text text 
            text text text text text 
    </div>
    <div id="rightCol">
    <div id="right2"></div>
    <div id="right4"></div>
    </div>
</div>
<div id="footer"></div>

CSS:

#all, #footer, #header{position:relative;width:500px;}
#footer, #header{background:green;height:30px;}

#content{width:300px;padding:0px 100px}

#rightCol, #leftCol{position:absolute;width:100px;top:0px;bottom:0px;}
#rightCol{left:0px;}
#leftCol{right:0px;}

#left1, #right2{background:yellow;height:100px;}
#left3, #right4{background:DarkRed;position: 
        absolute;left:0px;right:0px;bottom:0px;top:100px;}
于 2012-08-03T11:57:51.237 に答える
0

少しjqueryで。

<html>
    <head>
        <title>div align</title>
        <script src="Script/jquery-1.7.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {

                $('.flex').height($('#main').height() - 200);//200 height of 1 or 2 div (assume 1 and 2 div has same height)
            });
        </script>
    </head>

    <body>
        <div style="width:800px; margin:auto;">
            <div style="height:100px; border:1px solid RED">Header</div>
            <div >
                <div  style="width:100px; float:left; border:1px solid pink">
                    <div class="sdiv" style="width:100px; height:200px; border:1px solid RED">div 1</div>
                    <div class="flex" style="border:1px solid Black"> div 3</div>
                </div>

                <div id="main" style="width:590px; float:left; border:1px solid BLUE">
                    dynamic content<br />
                    <br />text
                    <br />
                    <br />
                    <br />text
                    <br />
                    <br />text
                    <br />
                     <br />text
                    <br />
                    <br />text
                    <br />
                    <br />
                    <br />text
                    <br />
                    <br />text
                <div style="clear:both"></div>
                </div>

                <div class="flex" style="width:100px; float:right; border:1px solid pink">

                    <div class="sdiv" style="width:100px; height:200px; border:1px solid GRAY">div 2</div>
                     <div class="flex" style="border:1px solid Black"> div 4</div>

                </div>

                <div style="clear:both"></div>
                <div style="height:30px; border:1px solid GREEN">Footer</div>

            </div>
        </div>
    </body>
</html>
于 2012-08-03T13:02:17.430 に答える