如何使用 960 在 css 中扩大列高

Question

美好的一天。

我正在使用 960 网格布局，并创建了两个 div 作为超过 960 宽度的背景包装，其次用作由文本和图像组成的 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 hack。

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标签？