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黑客。

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

如何使用960在css中扩展列高度

2 个答案: