Question

我的网页上有一个粘性标题和粘性页脚。在这两者之间，内容是动态生成的。但是，如果内容小于屏幕或设备高度，它看起来很奇怪（有白色背景的空间）。应该怎么做我想，如果我想让我的页面看起来完全占用？给高度100％的html，身体，每个容器解决我的问题！但这是一个标准吗？我们能这样使用吗？请给我一个最好的方法。我的网页应该在每个设备上看起来都一样。即使内容较少，包装背景图片应该占据整个设备屏幕，因为我的页脚贴在底部。

.header{
position:fixed;
top:0;
height:60px;
}
.content{
margin-top:60px;
padding:5px;
margin-bottom:60px;
background-image:url("dummy.png");
}
.footer{
position:fixed;
bottom:0;
height:60px;
}

最初，我还没有为html，body和wrapper division提供任何css。但是如果我的内容太少了（让我们假设我从JSON文件中得到两段）。所以我的背景图片是没有填满整个屏幕。（即使内容较少，我也想让它充满整个屏幕，以便我的网页在每个设备上看起来都相同）。

对于那个问题：

html{
height:100%;
}
body{
height:100%;
}
content{
height:100%;
}

如果我喜欢这样，它看起来像是解决了我的问题。但这是一个标准吗？这是一种正确的做法吗？将来会影响到什么吗？

Answer 1

希望这个符合您的要求。

<html>
    <!--
        "position: fixed": Is not supported in elder iOS/Safari and a fare range of mobile devices.
        "margin-top/bottom": Has know issues in IE8/7.

        If you want your website to support IE8+, Safari, iOS (5.1+)[iPhone 4+], Chrome, FireFox, Opera and some old Mac IE you need to fall back to a good old fashioned wrapping div.
        -> Tested in FireFox 36.0.1, Opera 30, iPhone 4 + 5, iPad iOS 5.1, IE8, IE9, IE11 and Chrome 43.0.2357.124.
    -->
    <head>
        <style>
            /* Not much sense to style those as class, sincen they are going to be unique */

            html, body{height: 100%}

            body{
                margin: 0px;
                overflow: hidden; /* We scroll in the content div */
            }

            div{
                display: block;
                margin: 0px;
                padding: 0px;
                position: relative;
            }

            #header{
                background:red;

                height: 60px;
                position: absolute;
                right: 0px;
                top: 0px;
                width: 100%;
                z-index: 11;
            }

            #footer{
                background:pink;

                bottom: 0px;
                height: 60px;
                position: absolute;
                right: 0px;
                width: 100%;
                z-index: 10;
            }


            #contentWrapper{
                background: crimson;

                box-sizing: border-box;
                height: 100%;
                overflow: hidden;
                padding: 60px 0px 60px 0px; /* Padding is less bugged than margin in IE8 and old mac IE */
                width: 100%;
                z-index: 1;
            }

            #content{
                background: orange;
                background-image: url(https://www.google.ch/images/srpr/logo11w.png);
                background-size: cover;

                /*background-image:url("dummy.png");*/
                height: 100%;
                overflow: auto;
                width: 100%;
            }
        </style>

        <script>
            //Remove this on your live test :p
            function fakeContent(){
                var tE = document.getElementById('content');
                for(var i=0;i<300;i++) tE.innerHTML += ' content' + i.toString();
            }
        </script>
    </head>

    <body onload = 'fakeContent()'>
        <div id = 'header'>Header</div>

        <div id = 'contentWrapper'>
            <div id = 'content'>Content</div>
        </div>
        <div id = 'footer'>Footer</div>
    </body>
</html>

我可以从html开始给我所有容器100％的高度吗？

1 个答案: