css - 怎么样手机上的页面的主体高度根据屏幕高度自适应呢？
本文介绍了css - 怎么样手机上的页面的主体高度根据屏幕高度自适应呢？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
html,body {
height:100%;
overflow:hidden;
}
*{margin:0;padding:0}
li,input,button{height:35px;}
#content{
height:100%;
margin-top:100px;
margin-left:100px;
width:60%;
}
#box{
height:100%;
bottom:35px;
text-align:center;
border:1px solid red;
overflow:scroll;
}
li{
border:1px solid red;
margin-top:10px;
}
#header {
width:100px;
height:100px;
position:fixed;
top:0;
background:#FeE4B5;
}
#footer{
clear:left; /* 防止float:left对footer的影响 */
width:180px;
height:80px;
position:fixed;
bottom:0;
right:0;
background:#FFE4B5;
}
</style>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function send(){
$("box").innerHTML+="<h1>"+$("msg").value+"</h1>";
$("box").scrollTop+=1000;
}
window.onload=function(){
$("box").onscroll=function(){
console.log(this);
console.log(this.scrollTop);
}
}
</script>
</head>
<body>
<div id="header"> this is header</div>
<div id="footer">
<input id='msg' type="" vavlue='1111'>
<button onclick='send()' >SEND</button>
</div>
<div id="content">
<div id='box'>
dfsfaf
</div>
</div>
</body>
</html>header,footer都是fixed高度，让中间的section 高度随着屏幕高度自动分配 写成height 100% 怎么样才能实现留出footer的高度 ，让section容器的高度为根据屏幕自动设置为 100% 减去 footer的高度
解决方案
少年啊少年~一根筋~
拿去玩~说爱我~
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<style>
body{
margin:0;
}
.warper{
height:100%;
display: flex;
flex-direction:column;
align-content:stretch;
}
.header{
height:5rem;
background-color: red;
order: 0;
flex-shrink: 0;
}
.footer{
height:3rem;
background-color: blue;
order: 2;
flex-shrink: 0;
}
.container{
flex-grow:999;
order: 1;
overflow:hidden;
position: relative;
}
.container .baseline{
min-height:100%;
height:100%;
overflow:auto;
}
</style>
</head>
<body>
<div class="warper">
<div class="header">header</div>
<section class="container">
<div class="baseline">
<p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p>
</div>
</section>
<div class="footer">footer</div>
</div>
</body>
</html>
增加内容：
1，三星手机屎一样的兼容，请使用
display:box;
display:flex
作为perfix，谢谢；
2，既然po主使用的section，认为至少IE8以上；
可以抛弃flex；使用:
section.main{
display:block;
box-sizing:border-box;
height:100%;
padding: 顶部高 0 底部高
}
如果使用这种方法，注意webkit内核无法height:100%;
3，真心没太见过不兼容flex的手机，PO主用的luma？BB？
这篇关于css - 怎么样手机上的页面的主体高度根据屏幕高度自适应呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
