不同的CSS底部布局的Firefox和Chrome与表布局、不同、Chrome、CSS
下面我用表和表细胞，使元件粘成底部，我的屏幕是150％的高度，它可以很好地用于我的浏览器，但火狐，100％画面下方的底部元件棒。而不是整个画面。 为了清楚地说明，你可能会看到的jsfiddle这里： http://jsfiddle.net/zZVJT/ 这的工作原理相同铬
任何人都可以告诉我怎么解决这个问题？为什么？
这里是我的html：
＆LT; HTML＆GT;
＆LT;头LANG =EN＆GT;
＆LT;元的charset =UTF-8＆GT;
＆LT;冠军＆GT;测试＆LT; /标题＆GT;
＆LT;链接的href =test.css相对=样式＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV CLASS ='集装箱边框'＆GT;
＆LT; DIV CLASS =容器的内容边界＆GT;
我应该在中间
＆LT; DIV CLASS =容器内容底部边框＆GT;
我应该在底部
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
和这里的CSS：
HTML，身体{
高度：100％;
最小高度：100％;
}
。容器{
显示：表;
身高：150％;
宽度：100％;
}
.container内容{
显示：表细胞;
位置：亲属;
垂直对齐：中间;
文本对齐：中心;
}
.container内容底{
位置：绝对的;
底部：0;
}
。边界{
边界：1px的固体＃00F;
}
解决方案
您不能使用底部：0;因为那样的话，他表示，他始终站在那是你的问题。
我没有用底：0;然后我用的margin-top，现在HES下。这是我的小提琴。 但是你不能使用底部：0;然后再去做你想要什么。 http://jsfiddle.net/zZVJT/3/
的HTML是一样的：
＆LT;身体GT;
＆LT; DIV CLASS ='集装箱边框'＆GT;
＆LT; DIV CLASS =容器的内容边界＆GT;
我应该在中间
＆LT; DIV CLASS =容器内容底部边框＆GT;
我应该在底部
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
但CSS改变：
HTML，身体{
身高：150％;
最小高度：100％;
}
。容器{
显示：表;
身高：150％;
宽度：100％;
}
.container内容{
显示：表细胞;
位置：亲属;
垂直对齐：中间;
文本对齐：中心;
}
.container内容底{
位置：绝对的;
的margin-top：90％;
}
。边界{
边界：1px的固体＃00F;
}
Here I use table and table-cell to make the element stick into bottom, my screen is 150% height, it works well for my Chrome, but for Firefox , the bottom element stick at the bottom of 100% screen. not the whole screen. For clear illustration you may see the jsfiddle here:http://jsfiddle.net/zZVJT/ this works the same as chrome
could anyone tell me how to solve this problem and WHY?
here is my html:
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<link href="test.css" rel="stylesheet">
</head>
<body>
<div class= 'container border'>
<div class="container-content border">
I should be in the middle
<div class="container-content-bottom border">
I should be in the bottom
</div>
</div>
</div>
</body>
</html>
and the css here:
html, body{
height:100%;
min-height: 100%;
}
.container{
display: table;
height:150%;
width: 100%;
}
.container-content{
display: table-cell;
position: relative;
vertical-align: middle;
text-align: center;
}
.container-content-bottom{
position: absolute;
bottom: 0;
}
.border{
border: solid 1px #00f;
}
解决方案
You must not use bottom:0; because then he stands where he always stand and that is your problem.
I have not used bottom:0; and then i used margin-top and now hes is under. Here is my fiddle. But you must not use bottom:0; and then do it what you want. http://jsfiddle.net/zZVJT/3/
The HTML is the same:
<body>
<div class= 'container border'>
<div class="container-content border">
I should be in the middle
<div class="container-content-bottom border">
I should be in the bottom
</div>
</div>
</div>
</body>
But the css is changed:
html, body{
height:150%;
min-height: 100%;
}
.container{
display: table;
height:150%;
width: 100%;
}
.container-content{
display: table-cell;
position: relative;
vertical-align: middle;
text-align: center;
}
.container-content-bottom{
position: absolute;
margin-top:90%;
}
.border{
border: solid 1px #00f;
}
