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

标签 css html 960.gs overlapping

美好的一天。

我正在使用 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;

最佳答案

http://blueprintcss.org/

强烈推荐的框架,我已经将它用于多个元素。

让您避免像这样烦人的 CSS hack。

关于css - 如何使用 960 在 css 中扩展列高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8394361/

相关文章:

css - 除非根据(文本)行数放大或缩小,否则 1px 元素会消失

java - RStudio 和 Shiny : messages between server and client

javascript - 是否有检测 JavaScript 是否作为 WebWorker 执行的标准机制?

css - 图像未与其上方和下方的文本水平对齐(960 网格)

CSS,多行内联列表

javascript - 如何在 jQuery 中声明变量

css - 如何使用 richfaces 和 CSS 在 JSF 应用程序中添加背景图像?

html - 无法弄清楚如何将 nth-of-type 选择器与转换结合起来

javascript - jQuery Ajax 加载许多相同的东西

html - 如何使用 Bootstrap 3 将 960.gs 网站转换为 HTML