如何使内容100％高度和等高列在此布局？ [英] How to Make the Content 100% height and equal height columns in this layout?
问题描述
我有这个布局，其中my_menu固定在顶部，其次是标题，其次是960px和居中的内容，其中3列已左移，最后是一个粘性页脚。
-
问题是如何让内容扩展到100％高度
，即使在任何一个孩子没有足够的内容
li>保持粘性页脚！ Pure CSS，No JavaScript，No
JQuery！
HTML标记
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8/>
< title>文件标题< / title>
< link rel =stylesheethref =main.csstype =text / css/>
< / head>
< body id =index>
< div id =wrapper>
< div id =my_menu>
固定菜单宽度100％
< / div>
< div id =my_header>
HEADER WIDTH 100％
< / div>
< div id =content>
< p> CONTENT 960px< / p>
< div id =col1class =content_columns>
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 =col2class =content_columns>
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 =col3class =content_columns>
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 class =clear_floats>< / div> <！ - 用于清除浮动 - >
< / div>
< div class =push>< / div> <！ - For Sticky Footer - >
< / div>
< div id =my_footer>
STICKY FOOTER WIDTH 100％
< / div>
< / body>
< / html>
CSS样式
* / *对于CSS重置* /
{
padding：0;
margin：0;
}
html，body
{
width：100％;
height：100％;
}
div＃wrapper
{
width：100％;
height：100％;
min-height：100％; / *对于Sticky Footer * /
height：auto！important; / * For Sticky Footer * /
margin：0 auto -70px; / *对于Sticky Footer * /
}
div＃my_menu
{
width：100％;
height：50px;
outline：1px solid black;
background-color：gray;
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 / *用于结算浮动* /
{
清除：both;
}
div＃my_footer
{
width：100％;
height：70px;
outline：1px solid black;
background-color：pink;
text-align：center;
}
div.push / *对于Sticky Footer * /
{
height：70px;
}
具有完整IE6 +支持的解决方案。我将拉出并解释相关的代码段。
现代支持
div.content_columns {
width：320px;
outline：1px solid black;
background-color：gold;
text-align：center;
display：table-cell; / *没有浮点数，而是* /
}
任务容易，我们需要做的是使用 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 hack来获得这些值只能在IE中使用。
我们正在做的是获取IE 6& 7将每个列视为 inline-block 元素，但由于他们不支持（至少对于块级元素），我们使用 inline 显示和缩放：1 ; 修复触发 IE的 hasLayout 属性。这将处理它像一个 inline-block elmenent。然后，我们将它们都设置为在顶部彼此对齐，并使用另一个小技巧。我们使用 padding：9999px 来扩展元素的底部，以使其他元素不太可能长于它，我们使用 margin：-9999px; 以在我们这样做时不更改页面的呈现。我们不想扩展页面，只是背景。 9999px 是任意的，并且可以是任何值，只要其足够高以大于最长和最短列之间的差。为了最后的触摸，我们在容器元素上设置 overflow：hidden ，以便背景不会通过渗出底部来扩展页面。
有了它，完整的IE 6+支持多列固定宽度布局使用纯CSS 2 （plus MS zoom ）。
I have this layout where the my_menu is fixed at the top, followed by header, followed by content with 960px and centered, in which 3 columns have been floated left and finally followed by a sticky footer.
The problem is How to make the content stretch to the 100% height even if there is not enough content in any one of the child columns?
How make the 3 columns equal height regardless of any column's content?
- Maintain the sticky footer! Pure CSS, No JavaScript, No JQuery!
The HTML Markup
<!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" class="content_columns">
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" class="content_columns">
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" class="content_columns">
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 class="clear_floats"></div> <!-- For Clearing Floats -->
</div>
<div class="push"></div> <!-- For Sticky Footer -->
</div>
<div id="my_footer">
STICKY FOOTER WIDTH 100%
</div>
</body>
</html>
The CSS Styles
* /* 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. I'll pull out and explain the relevant bits of code.
Modern support
div.content_columns {
width: 320px;
outline: 1px solid black;
background-color: gold;
text-align: center;
display: table-cell; /* No floats, this instead */
}
So, since modern browsers make this task easy, all we need to do is use display: table-cell to get this to work. It makes the columns equal height, and acts as a table-cell. Easy peasy lemon squeezy.
IE 6 & 7 support
<!--[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]-->
Now, for IE 6 and 7 support we're going to use a few tricks. First off, it should be noted that this doesn't have to be done in a conditional comment, but I like it better that way. Cleaner to me. But you can use CSS hacks to get these values to only work in IE.
What we're doing is getting IE 6 & 7 to treat each column as an inline-block element, but since they don't support that (for block level elements at least) we use inline display, and a zoom: 1; fix to trigger IE's hasLayout property. This will treat it like it is an inline-block elmenent. Then, we set them all to be aligned at the top with each other, and use another little trick. We use the padding: 9999px to extend the bottom of the element so far that the other elements are not likely to be longer than it, and we use margin: -9999px; to not change the rendering of the page when we do so. We don't want to extend the page, just the background. 9999px is arbitrary and can be any value as long as it is high enough to be greater than the difference between the longest and shortest columns. And for the final touches, we set overflow: hidden on the container element so that the backgrounds don't extend the page by bleeding out the bottom.
And there you have it, full IE 6+ support for multicolumn fixed width layout using pure CSS 2 (plus MS zoom).
这篇关于如何使内容100％高度和等高列在此布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
