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中的半動態內容背景

回答

相關問題