如何在此布局中制作内容100％高度和相等高度的列？

2018-06-07 18:51:32

我有这样的布局，其中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" 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>

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; 
}

具有完整IE6 +支持的解决方案。我将提出并解释相关的代码位。

现代支持

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来实现这个功能。它使列的高度相等，并充当表格单元格。容易peasy柠檬squeezy。

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把每一列当作inline-block元素，但由于他们不支持（至少对于块级元素），我们使用inline显示和zoom: 1; 修复触发IE的hasLayout属性。这将把它看作是一个inline-block代理。然后，我们将它们全部设置为在顶部彼此对齐，并使用另一个小技巧。我们使用padding: 9999px来扩展元素的底部，以至于其他元素不可能比它长，我们使用margin: -9999px; 当我们这样做时不改变页面的渲染。我们不想延长页面，只是背景。 9999px是任意值，只要它足够高，可以大于最长和最短列之间的差异。最后，我们设置了overflow: hidden在容器元素上，这样背景不会通过渗出底部来扩展页面。

在那里你可以得到它，完全IE 6+支持多列固定宽度布局使用纯CSS 2（加上MS zoom ）。

bfrohs提出了一个可在非IE浏览器中工作的解决方案：全高度栏，无需滚动

@Jawad - 再次感谢您的时间和您的帮助！ :)

AFAIK这是不可能的纯CSS没有使用网格布局或flexbox，这两种浏览器都不支持。（Flexbox至少已经是W3C的工作草案了......）

你可以通过应用min-height来解决这个问题，它有几个缺点，或者通过js设置高度。我不知道任何合理的crossbrowser css-solution atm。

链接地址: http://www.djcxy.com/p/23731.html

上一篇: How to Make the Content 100% height and equal height columns in this layout?

下一篇: How to use HTML to print header and footer on every printed page of a document?