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) 图表的 1 号和 3 号 div，2) 动态内容的 div 以及 3) 图表中的 2 和 4 div。

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

根据您的设计固定 3 列中每一列的宽度，浮动前 2 列。但是，将第 3 列设为 position:absolute。置顶：0px；底部：0px；右：0px；

然后根据你想要的比例用百分比设置里面 2 个 div 的高度。

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

调整动态内容区域中的文本数量，看看它是如何工作的。

更新——根据提问者的澄清完全修改：

我将通过绝对定位左右列来完成此操作，然后将第二个 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 回答