html – 如何在此布局中使内容100％高度和相等高度列？_html-js-css

概述我有这个布局,其中my_menu固定在顶部,然后是标题,接着是960px和居中的内容,其中3列已经浮动,最后是粘性页脚. >问题是如何使内容拉伸到100％的高度即使任何一个子列中没有足够的内容？ >无论列是什么,如何使3列的高度相等内容？ >保持粘性页脚！纯CSS,没有JavaScript,没有 JQuery的！ HTML标记 <!DOCTYPE html> <html la 我有这个布局,其中my_menu固定在顶部,然后是标题,接着是960px和居中的内容,其中3列已经浮动,最后是粘性页脚.

>问题是如何使内容拉伸到100％的高度
即使任何一个子列中没有足够的内容？
>无论列是什么,如何使3列的高度相等
内容？
>保持粘性页脚！纯CSS,没有JavaScript,没有
Jquery的！

HTML标记

<!DOCTYPE HTML> <HTML lang="en"> <head> <Meta charset="utf-8" /> <Title>document Title</Title> <link rel="stylesheet" href="main.CSS" type="text/CSS" /> </head> <body ID="index"> <div ID="wrapper">     <div ID="my_menu">     FIXED MENU WIDTH 100%     </div>     <div ID="my_header">     header WIDTH 100%     </div>     <div ID="content">         <p>CONTENT 960px</p>         <div ID="col1" >         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         ColUMN 1 WIDTH 320px HEIGHT 100%         </div>         <div ID="col2" >         ColUMN 2 WIDTH 320px HEIGHT 100%         ColUMN 2 WIDTH 320px HEIGHT 100%         ColUMN 2 WIDTH 320px HEIGHT 100%         ColUMN 2 WIDTH 320px HEIGHT 100%         ColUMN 2 WIDTH 320px HEIGHT 100%         ColUMN 2 WIDTH 320px HEIGHT 100%         ColUMN 2 WIDTH 320px HEIGHT 100%         ColUMN 2 WIDTH 320px HEIGHT 100%         ColUMN 2 WIDTH 320px HEIGHT 100%         </div>         <div ID="col3" >         ColUMN 3 WIDTH 320px HEIGHT 100%         ColUMN 3 WIDTH 320px HEIGHT 100%         ColUMN 3 WIDTH 320px HEIGHT 100%         ColUMN 3 WIDTH 320px HEIGHT 100%         ColUMN 3 WIDTH 320px HEIGHT 100%         </div>         <div ></div> <!-- For Clearing floats -->     </div>     <div ></div> <!-- For Sticky Footer --> </div>     <div ID="my_footer">     STICKY FOOTER WIDTH 100%     </div> </body> </HTML>

CSS样式

* /* For CSS reset */ { padding: 0; margin: 0; } HTML,body { wIDth: 100%; height: 100%; } div#wrapper { wIDth: 100%; height: 100%; min-height: 100%; /* For Sticky Footer */ height: auto !important; /* For Sticky Footer */ margin: 0 auto -70px; /* For Sticky Footer */ } div#my_menu { wIDth: 100%; height: 50px; outline: 1px solID black; background-color: grey; text-align: center; position: fixed; } div#my_header { wIDth: 100%; height: 100px; outline: 1px solID black; background-color: yellow; text-align: center; padding-top: 50px; } div#content { wIDth: 960px; margin: 0 auto; outline: 1px solID black; background-color: brown; text-align: center; } div.content_columns { wIDth: 320px; outline: 1px solID black; background-color: gold; text-align: center; float: left; } div.clear_floats /* For Clearing floats */ { clear: both; } div#my_footer { wIDth: 100%; height: 70px; outline: 1px solID black; background-color: pink; text-align: center; } div.push /* For Sticky Footer */ { height: 70px; }

解决方法 A solution with full IE6+ support.我将退出并解释代码的相关部分.

现代支持

div.content_columns {    wIDth: 320px;    outline: 1px solID black;    background-color: gold;    text-align: center;    display: table-cell; /* No floats,this instead */}

因此,由于现代浏览器使这项任务变得简单,我们所需要做的就是使用display：table-cell来实现这一点.它使列与高度相等,并充当表格单元格.容易腻的柠檬挤.

IE 6& 7支持

<!--[if lte IE 7]><style>    div#content {        overflow: hIDden;    }    div.content_columns {        vertical-align: top;        display: inline;        zoom:1;        padding-bottom: 9999px;        margin-bottom: -9999px;    }</style><![endif]-->

现在,对于IE 6和7的支持,我们将使用一些技巧.首先,应该注意的是,这不必在条件评论中完成,但我更喜欢这种方式.给我清洁.但是你可以使用CSS Hacks来获取这些值仅适用于IE.

我们正在做的是获得IE 6& 7将每列视为内联块元素,但从they don’t support that开始(至少对于块级元素)我们使用内联显示和缩放：1;修复以触发IE’s hasLayout property.这会将其视为内联块区域.然后,我们将它们全部设置为在顶部彼此对齐,并使用另一个小技巧.我们使用填充：9999px来扩展元素的底部到目前为止其他元素不可能比它长,我们使用margin：-9999px;我们这样做时不要改变页面的呈现.我们不想扩展页面,只需要扩展背景. 9999px是任意值,只要它足够大到最长和最短列之间的差值就可以是任何值.对于最后的触摸,我们设置溢出：隐藏在容器元素上,这样背景不会通过渗出底部来扩展页面.

并且你有它,完全IE 6支持多列固定宽度布局使用纯CSS 2(加上MS缩放).

总结

以上是内存溢出为你收集整理的html – 如何在此布局中使内容100％高度和相等高度列？全部内容，希望文章能够帮你解决html – 如何在此布局中使内容100％高度和相等高度列？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1107618.html

html – 如何在此布局中使内容100％高度和相等高度列？

发表评论

评论列表（0条）