Question

我有一个布局（JSFiddle Example），它使用页眉，页脚和3个div作为左，主和右内容。这一切对我来说都很完美，但我无法弄清楚如何正确（内容“附加侧边栏内容......”）为100％，以便绿色背景占据其下的所有空间，向上到页脚。

 <title>My Document</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="../respond.min.js"></script>
<body>
    <div class="gridContainer" id="gridContainer">
        <div id="header" class="site-header">
            <div class="wrap">

                <div id="branding" role="banner">
                    <p class="site-title"><a href="http://example.com">Site Title</a></p>
                    <p class="site-description">&nbsp;</p>
                </div><!--#branding-->

            </div><!--.wrap-->
        </div><!--#header-->

        <div id="main">
            <div class="wrap">

                <div id="primary">
                    <div id="content" role="main">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque augue nec nulla dapibus, ac faucibus sapien pellentesque. Vivamus cursus massa odio, id faucibus enim euismod at. Quisque pulvinar ligula risus, sit amet luctus diam molestie at. Aliquam erat volutpat. Maecenas non pellentesque mauris. Proin et vehicula ligula. Nunc fringilla orci in pretium vestibulum. Proin pulvinar elementum rutrum. Vivamus sagittis commodo lacus, sit amet fringilla ipsum rhoncus gravida. Suspendisse molestie felis id nisl iaculis, ut pharetra ipsum porttitor. Ut suscipit, massa ac mollis elementum, tortor tortor eleifend orci, sed interdum metus nisi id est. Morbi laoreet tristique sollicitudin. Cras ut ultrices ligula. Aliquam sed commodo libero. Nullam facilisis tempus cursus.</p>
                    </div><!--#content-->
                </div><!--#primary-->

                <div id="secondary">
                    <div class="widget">
                        <p>Main sidebar content...</p>
                    </div><!--.widget-->
                </div><!--#secondary-->

                <div id="tertiary">
                    <div class="widget">
                        <p>Additional sidebar content...</p>
                    </div><!--.widget-->
                </div><!--#tertiary-->

            </div><!--.wrap-->
        </div><!--#main-->

        <div id="footer" class="site-footer">
            <div class="wrap">

                <p class="site-credits">© Copyright owner</p>

            </div><!--.wrap-->
        </div><!--#footer-->

    </div><!--#page-->
</body>

Answer 1

以下是一个选项：http://jsfiddle.net/panchroma/7FFSt/

我对代码的唯一更改位于样式表的最底部：

#main{
overflow: hidden; 
}

#primary,
#secondary,
#tertiary{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#82aa38;
}

基本上我所做的就是为你的3列中的每一列添加一个大的填充和一个同样大的负边距，然后将包含溢出的溢出添加到#main div中。

这是一种非常有用的技术，可以在各种情况下使用，并且像魅力跨浏览器一样工作。

希望这有帮助！

Answer 2

我编写了一个jquery插件，它将两个div设置为相同的高度。此外，您可以设置屏幕宽度，此行为将停止（对于响应布局）。

您可以在此处找到插件：http://www.dipago.de/news/2/html-css-2-spalten-gleiche-hoehe

对于您的示例，请使用以下代码：

$(function () {
    $('#primary').sameBoxHeight({
        box: $('.widget')
    });
});

响应式布局中的CSS Equal Height Columns

2 个答案: