css中的半动态内容背景

对不起，如果标题不是太具描述性，但我不知道如何把它。问题是：css中的半动态内容背景

layout

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

我想3和4也包含背景图形，但动态高度。这意味着如果内容很多，3和4会更高，与额外内容成比例。另外3和4应该总是触摸页脚。

我知道这很容易，但我很难在其位置放置3和4。为此需要什么html/css结构或如何完成此操作？

补充：

Base code - 在区域1和2，应该是将与页脚加入他们不管内容区域的大小的区域3和4。

来源

2012-08-03 Łukasz Zaroda

可以在jsfiddle上复制代码，以便我们可以根据您的需要更新？ – 2012-08-03 11:34:32

我用一些代码添加了jsfiddle的链接。 – 2012-08-03 13:57:36

~~有可能是一个更简单的方法来做到这一点，但它很棘手让列向下伸展，以匹配兄弟姐妹的动态高度，我经常采取绝对定位。~~

为列创建3个div，包含1）div的＃1和＃3图，2）div动态内容和3）div 2和4在您的图中。

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

根据您的设计修正3列中每一列的宽度，将第一列2.然后，制作第三个位置：绝对。 Set top：0px;底部：0像素;右：0像素;

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

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

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

UPDATE - 彻底修订根据提问者的澄清：

我想通过完全做到这一点定位左，右科拉姆，然后绝对定位里面的每两列的第二个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;}

来源

2012-08-03 11:57:51 Faust

看起来您的解决方案不适用于左栏或我错过了什么？：/另外 - 我想有固定的高度像素的div 1和2。对于这个简单的效果，它似乎非常复杂：/。 – 2012-08-03 13:33:36

我不清楚你想要左列的行为。当我读到它时，你希望它有一个固定的高度，而中心区域可以增长或收缩。或者如何呢？ – Faust 2012-08-03 13:50:17

我的意思是说中心区域应该会增长，同时区域3和4也应该随之增长，而区域1和区域2则会有以像素为单位的固定高度。另外，区域3和4应该总是触摸页脚区域和区域1和2. – 2012-08-03 13:54:30

很少的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-03 13:02:17 vikrantx

css中的半动态内容背景

回答

相关问题