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

迷茫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

添加回复