Question

很抱歉，如果标题不太具描述性，但我不知道该怎么做。问题是：

layout

1和2，是仅包含背景图形的div，并且具有固定的宽度和高度。

我希望3和4也包含背景图形，但具有动态高度。这意味着如果内容很多，则3和4将更高，与其他内容成比例。 3和4也应该总是触摸页脚。

我知道这很容易，但我很难将第3和第4位置于其位置。需要什么html / css结构或如何实现这个？

加了：

Base code - 在区域1和区域2下，无论内容区域大小如何，区域3和区域4都应与页脚连接。

Answer 1

~~可能有一种更简单的方法可以做到这一点，但要让一个列向下拉伸以匹配兄弟的动态高度是很棘手的，我常常求助于绝对定位。~~

<罢工>

为列包含3个div以包含1）图表的＃1和＃3，2）动态内容的div和3）图表中的div 2和4。

将这3个放在div中（我给这个人一个id为“all”）。将clearfix样式应用于此容器（在CSS末尾定义的样式）。应用位置：相对于此div。您还需要精确设置此容器的宽度以包含三列（正确考虑第3列，绝对定位的列所必需的）

根据您的设计修复3列中每一列的宽度，浮动第一列2.然后，设置第3列位置：绝对值。顶部：0px;底部：0像素;右：0像素;

然后根据您想要的比例设置内部2个div的高度。

我的解决方案有很多。所以我把代码保存在jsfiddle：http://jsfiddle.net/feaLC/5/

~~调整动态内容区域中的文本量以查看其工作原理。~~

更新 - 根据提问者的说明完全修改：

我通过绝对定位左右列完成此操作，然后将第2个div绝对定位在这两列中的每一列中以一直延伸到底部：

另请参阅：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;}

Answer 2

小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>

css中的半动态内容背景

2 个答案: