问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎么样手机上的页面的主体高度根据屏幕高度自适应呢？

头像
tablecell
    1.5k165113
    
<!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的高度

    预览效果

    css
    阅读 13k
    1 个回答
    得票最新
    头像
    golden_freeman_china
      1.8k1211
      ✓ 已被采纳

      少年啊少年~一根筋~
      拿去玩~说爱我~

      <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？

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题