gpt4 book ai didi

响应式布局中的 CSS 等高列

转载 作者:太空宇宙 更新时间:2023-11-04 13:10:18 24 4
gpt4 key购买 nike

我有一个布局 ( 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>

最佳答案

这是一个选项:http://jsfiddle.net/panchroma/7FFSt/

我对您的代码所做的唯一更改是在样式表的最底部:

#main{
overflow: hidden;
}

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

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

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

希望这对您有所帮助!

关于响应式布局中的 CSS 等高列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24725767/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com