我正在为我的网站使用粘性页脚设计,该样式已从Ben Frain的HTML5和CSS3(第二版)的响应式网页设计中采用。它可以在主要的现代浏览器上完美运行,但不能在Samsung Galaxi Note 2内置浏览器上运行。我想知道为什么吗?欢迎任何解释或建议,包括来自iphone用户的任何反馈。
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Sticky footer</title>
</head>
<style type="text/css">
html, body{
margin: 0;
padding:0;
}
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
min-height: 100%;
}
#header{
background-color: #0FF;
}
#MainContent{
flex: 1;
}
#footer{
background-color: #0F9;
}
</style>
<body>
<div id="header">This is the header</div>
<div id="MainContent">This is the main content</div>
<div id="footer">This is the footer</div>
</body>
</html>
三星Galaxi Note 2内置浏览器即使放置-webkit也不能正确处理html5 flexbox概念。请改用Chrome或FireFox。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句