html5 - 关于CSS布局（不使用JS）-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

html5 - 关于CSS布局（不使用JS）

怪我咯 2017-04-17 13:46:33

[HTML讨论组]

672

头部和底部高度固定（30px），怎么让中间的的section高度自适应剩下的屏幕高度？
当section的高度小于浏览器视窗时，footer在浏览器的底部，当section高度大了视窗时，即出现滚动条时，footer在不固定在视窗底部，而是紧跟在section的后面，只有滚动条拖到section的尾部才看到footer

怪我咯

走同样的路，发现不同的人生

全部回复(5)

迷茫2017-04-17 13:48:33 5楼

题主可能想问的是有名的Sticky Footer的问题。推荐的做法：

html结构稍作变动，如下。

<p class="wrapper">
    <header></header>
    <section></section>
    <p class="footer_placeholder"></p>
</p>
<footer class="footer">
    <!--页脚-->
</footer>

搭配的css：

html, body{height: 100%;}
.wrapper{
    min-height: 100%;
    margin-bottom: -30px;
}
.footer, .footer_placeholder{height: 30px;}

这个实现方式来源于 Ryan Fait's HTML5 CSS Sticky Footer。如果英文内容看起来费劲，也可以阅读这篇文章。

赞 +0

添加回复

伊谢尔伦2017-04-17 13:48:33 4楼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    
      html{
        /*height: 100%; *//*如果想看看效果可以放出该行，中间section自适应，当然要父级高度不为0才能看出来，细节楼主可自己调*/
      }
      body{
        display: flex;
        flex-direction: column;
        height: 100%;
        margin: 0
      }
      footer,header{
        background: blue;
        height: 30px;
      }

      section{
        flex-grow: 100;
        background: red;
      }




    </style>
  </head>
  <body>
    <header></header>
    <section>
      是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发 是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发 是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发 是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发 是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发 是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发 是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发 是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发 是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发 是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发 是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发 是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发 是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发 是打发打发是否打算发生的说的发生东方闪电艾弗森发生的发生大幅阿斯蒂芬阿斯蒂芬阿斯蒂芬啊是打发打发卡就是短发快速的恢复卡上打飞机了阿斯达会计法还是看见了地方哈时间考虑对方好啊开始建立地方啊看来是的理解发射基地发
    </section>
    <footer></footer>

  </body>
</html>

flex布局在有的浏览器中需要加上浏览器前缀，主流浏览器应该没问题

赞 +0

添加回复

ringa_lee2017-04-17 13:48:33 3楼

纯css方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            height:100%;
            overflow: visible;
            margin:0;
            padding:0;
        }
        header,footer{
            height:30px;
            outline: 1px dotted #f00;
        }
        section{
            box-sizing: border-box;
            min-height:100%;
            padding-top:30px;
            margin-top: -30px;
            padding-bottom:30px;
            margin-bottom: -30px;
        }
    </style>
    <script>
        function fill(){
            var i = 0;
            var el = document.getElementsByTagName('section')[0];
            while(i++ <= 100){
                el.innerHTML += 'section<br>';
            }
        }
    </script>
</head>
<body>
    <header>header</header>
    <section>
        <button type="button" onclick="fill()">填充section</button><br>
    </section>
    <footer>footer</footer>
</body>
</html>

赞 +0

添加回复

大家讲道理2017-04-17 13:48:33 2楼

html,body {

width:100%;
height:100%;

}
section {

height:calc(100% - 60px)

}

不知道这样行不行，因为我一直都是js控制$(window).height()-60px;不过这样的话会卡，你的意思就是想在section里面滚动页面内容是吧，加上-webkit-overflow-scrolling: touch苹果设备可能会好，之前的安卓4.4会很卡。不过如果真的要这样实现的话，最好js，好像有个iscroll。而且，就算你这么实现，你肯定要把页面滚动条取消掉，改用section区域的滚动条，在这个方面，ios和安卓又不同，不过发现只要给安卓（还是苹果，不记得了，就是不出现滚动条）添加一个空p，就可以出现滚动条。哎，说了这么多，感觉没啥用，满纸荒唐言，一把辛酸泪。

赞 +0

添加回复

阿神2017-04-17 13:48:33 1楼

section类为sec
第一种情况很简单

.sec
    padding:30px 0;
}

第二种就不用js真心很蛋疼

var fixedHeight = $(window).height();
var secHeight=$(".sec").css("height");
if (secHeight>fixedHeight) {
    $(".sec").css("position","staic");
}
else {
     $(".sec").css("position","fixed");
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>