CSS 100% 高度布局

Posted

技术标签:

【中文标题】CSS 100% 高度布局【英文标题】：CSS 100% height layout 【发布时间】：2011-09-03 18:39:40 【问题描述】：

我知道这是一个常见问题，我查找了一些解决方案，但找不到我想要的确切内容。

我想将this 转换为无表格布局。

注意：页眉和页脚必须设置为以像素为单位的固定高度（50 像素即可）。

我遇到的主要问题是，我无法让中间的那个“大盒子”表现得像处理桌子时那样。有一些解决方案适用于可变长度内容（文本、图像），但我希望这个盒子看起来和表现得像一个盒子——有边框、圆角等等。

【问题讨论】：

***.com/questions/485827/… ***.com/questions/172918/… 这里还有一个例子：reallinks.org/DIV-Header-Layout-100-Height + 2 列/左右 【参考方案1】：

你没有说你的子元素的高度，所以我不得不做出一些假设。如果需要，您可以使用百分比。

<style>
html,body margin:0;padding:0;

#mainContainer 
height:100%;
width:100%;


#header 
height:15%;
width:100%;
background-color:red;


#center 
height:75%;
width:100%;
background-color:blue;


#footer 
height:10%;
width:100%;
background-color:pink;

</style>

    <body>
    <div id="mainContainer">
    <div id="header">Header</div>
    <div id="center">Center</div>
    <div id="footer">Footer</div>

</div>

    </div>
    </body>

【讨论】：

是的，同意 - 我编辑了这个问题。它们确实需要固定高度（例如 50px）。 这无论如何都行不通。百分比高度要求父容器具有指定的高度。当父级没有指定高度时，将 height:100% 视为 height:auto。 jsfiddle.net/ajVSd/1 @Layke 可以看看***.com/questions/30106602/… 吗？【参考方案2】：

您可以使用表格样式 CSS 属性来做到这一点，但仍保留无表格标记（这仍然是一个胜利）。

示例

HTML

<div id="container">
    <div id="header"><div>header</div></div>
    <div id="content"><div>content</div></div>
    <div id="footer"><div>footer</div></div>
</div>

CSS

html,
body 
    height: 100%; 
    padding: 0;
    margin: 0;


#container 
    display: table; 
    width: 100%;
    height: 100%;
    border: 1px solid red;   
    text-align: center;


#container > div    
    display: table-row;   
    width: 100%;


#container > div > div    
    display: table-cell;   
    width: 100%;
    border-radius:10px; 



#header > div 
    height:50px; 
    border:solid 2px #aaa;


#content > div 
    height: 100%;    
    background:#f0f4f0; 
    border:solid 2px #5a5;


#footer > div 
    height:50px; 
    border:solid 2px #a55;

jsFiddle.

【讨论】：

哦，是的，我想我可以 :) 那太棒了。感谢您的快速解决方案。 旧浏览器不太支持表格样式，如果这对您很重要的话。 好吧，这对我来说并不重要（无论如何我都需要 WebSockets），但如果有人想出一个替代答案，那可能会对其他人有所帮助。它可能会更好，并以积分的形式赢得一些爱。 @Beejamin 不幸的是， @dinchev 好吧，它们的样式像表格，但标记不包含表格。随心所欲地称呼它。【参考方案3】：

“多个绝对坐标”是实现此目的的好方法。这是你绝对定位一个盒子，然后给它顶部和底部坐标的时候。在不指定高度的情况下，您会得到一个距离其父项的顶部边缘 10px 和底部边缘 10px 的框。

Here's an example

如果您关心该浏览器，则需要添加 IE6 特定样式。

Here's an article 谈技术（加上 IE6 修复）- 知道它是一件好事，即使您不使用它来解决这个问题。

【讨论】：

嗯，实际上我认为这更好 - 更少的标记和没有像残余这样的特定表格。我太快推广答案了，所以我很抱歉，但我想我必须把它改成这个。没想到还有别的办法。 非常适合该应用程序（单屏聊天应用程序）。谢谢。 优秀的解决方案，想想就这么简单！ 哇！这实际上是一种更简单的方法！不错的答案！

以上是关于CSS 100% 高度布局的主要内容，如果未能解决你的问题，请参考以下文章

具有固定列和流动列的 CSS 布局

100% 带有页眉和页脚的 Css 布局

CSS布局中的问题

div css布局网页如何实现网页自动适应屏幕高度和宽度

DIV+CSS布局问题 100%的页面上边固定高度下面div：height100%填充为左右结构左边固定宽度右边width:100%

CSS全屏布局总结