列の高さをCSSで拡大する方法960

Question

Good Day

私は960のグリッドレイアウトを使用しています.2つのdivは960幅を超える背景ラッパーとして機能し、2つ目はテキストと画像からなる3つの列のコンテンツとして使用されます。

私の問題は、背景とコンテンツの両方で高さを100％に設定しようとしましたが、イメージとテキストが背景ラッパーと重ならないように拡張しません。

何か不足していますか？あなたの助けが大変ありがとうございます。

<div id="contentMain" class="container_12"> 
     <div class="sub3 grid_4"> 
      <h2>Graphic Design</h2> 
       <hr> 
        <p><span>I specialize in designing different graphic materials aimed to catch your target audience and bring more business to you.</span></p> 
        <div class="frameImg"> 
         <img src="images/graphicdesign_image.jpg" alt="graphic design" /> 
        </div><!-- end of framImg --> 
     </div><!-- end of sub1 --> 

     <div class="sub3 grid_4">  
      <h2>Web Design</h2> 
       <hr> 
        <p><span>I can give life into your existing website and wow your visitors. When I work for a company, I always make sure they are happy with the results. I strive to think creatively for my clients, making myself a mirror of many faces.</span></p> 
        <div class="frameImg"> 
         <img src="images/web_image.jpg" alt="web design" /> 
        </div><!-- end of framImg --> 
     </div><!--end of sub2 --> 

     <div class="sub3 grid_4">  
      <h2>Motion Effects</h2> 
       <hr> 
        <p>I am familiar with creating sophisticated motion graphics and cinematic visual effects using Adobe After Effects. I transform moving images for delivery to theaters, living rooms, personal computers, and mobile devices.</p> 
        <div class="frameImg"> 
         <img src="images/motioneffects_image.jpg" alt="motion effects" /> 
        </div><!-- end of framImg --> 
     </div><!--end of sub3 --> 

    </div><!-- end of contentMain --> 

    <div class="clear"></div> <!-- Important! --> 

#contentMainBackground { 
    background:url("../images/body_bg.jpg") repeat; 
    min-height:290px; 
    height:auto !important; 
    height:290px; 
    width:100%; 
    position:absolute; 
} 
#contentMain { 
    min-height:290px; 
    height:auto !important; 
    height:290px; 

Answer 1

http://blueprintcss.org/

強くお勧めしますフレームワーク、私は複数のプロジェクトのためにそれを使用しました。

このような迷惑なCSSハックを避けることができます。

Answer 2

12列グリッド用のコンテナdivを持っていて、そのトップレベルのコンテナ要素に背景を適用してみませんか？

<div id="wrapper"> 

<div id="contentMain" class="container_12"> 
     <div class="sub3 grid_4"> 
      <h2>Graphic Design</h2> 
       <hr> 
        <p><span>I specialize in designing different graphic materials aimed to catch your target audience and bring more business to you.</span></p> 
        <div class="frameImg"> 
         <img src="images/graphicdesign_image.jpg" alt="graphic design" /> 
        </div><!-- end of framImg --> 
     </div><!-- end of sub1 --> 

     <div class="sub3 grid_4">  
      <h2>Web Design</h2> 
       <hr> 
        <p><span>I can give life into your existing website and wow your visitors. When I work for a company, I always make sure they are happy with the results. I strive to think creatively for my clients, making myself a mirror of many faces.</span></p> 
        <div class="frameImg"> 
         <img src="images/web_image.jpg" alt="web design" /> 
        </div><!-- end of framImg --> 
     </div><!--end of sub2 --> 

     <div class="sub3 grid_4">  
      <h2>Motion Effects</h2> 
       <hr> 
        <p>I am familiar with creating sophisticated motion graphics and cinematic visual effects using Adobe After Effects. I transform moving images for delivery to theaters, living rooms, personal computers, and mobile devices.</p> 
        <div class="frameImg"> 
         <img src="images/motioneffects_image.jpg" alt="motion effects" /> 
        </div><!-- end of framImg --> 
     </div><!--end of sub3 --> 

    </div><!-- end of contentMain --> 

</div> 

    <div class="clear"></div> <!-- Important! --> 

代わりにbodyタグに背景を適用することはできますか？