响应式布局中的CSS等高列_Css_Responsive Design

响应式布局中的CSS等高列

css responsive-design

响应式布局中的CSS等高列,css,responsive-design,Css,Responsive Design,我有一个布局（），它使用页眉、页脚和3个div作为左、主和右内容。这一切对我来说都是完美的，但我不知道如何将内容“附加边栏内容…”设置为100%，以便绿色背景占据它下面的所有空间，直到页脚 <title>My Document</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <

我有一个布局（），它使用页眉、页脚和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>

我的文档


Lorem ipsum dolor sit amet，是一位杰出的献身者。佩伦茨克和奥古斯·纳拉·达皮布斯，ac福西布斯·萨皮恩·佩伦茨克。我是福西布斯·埃尼姆·尤伊斯莫。奎斯克·普尔文纳·里索斯，坐在阿梅特·卢克图斯·迪亚姆·莫莱斯蒂的座位上。阿利奎姆·埃拉特·帕特。Maecenas非佩伦茨克毛里斯。前驱体舌。前庭前区的小虎鱼。芸香枕叶素原。人马共栖，艾美特-弗林吉尔-同侧菱形妊娠。猫科动物的悬液性胎病，但它是由同侧门引起的。但事实上，这是一个基本要素，是一个基本要素，是一个基本要素。Morbi laoreet tristique sollicitudin。乌尔特里斯舌苔。我是自由人。为方便起见，请暂时停止
主边栏内容
附加侧边栏内容
©版权所有人

这里有一个选项：

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

#main{
overflow: hidden; 
}

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

基本上，我所做的就是给3列中的每一列添加一个大的填充和一个同样大的负边距，然后在环绕它们的#main div中添加溢出隐藏

这是一个非常有用的技术，你可以在各种情况下使用，就像一个迷人的跨浏览器

希望这有帮助

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

您可以在此处找到插件：

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

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

非常感谢你！你帮我节省了很多时间！我已经修改了你的建议，效果很好，但是有没有办法使柱子或布局达到全高？@Stephermoreland，谢谢。当你说“全高”的时候，你是在想一个粘脚吗？您是否可以在这里包含所有相关的代码，因为这是一个很短的片段。也不是每个人都懂德语，所以如果你能用英语写一些文字可能会更好。