我可以从 html 开始为我的所有容器提供 100% 的高度吗？答案

【问题标题】：Can i give height 100% to all my containers starting from html?我可以从 html 开始为我的所有容器提供 100% 的高度吗？
【发布时间】：2015-08-28 00:30:30
【问题描述】：

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

.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 部门提供任何 css。但是如果我的内容太少（假设我从 JSON 文件中得到了两个段落）。所以我的背景图像没有被填满屏幕。（即使内容较少，我也想让它充满整个屏幕，这样我的网页在每个设备上看起来都一样）。

对于那个问题：

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

如果我这样做，它看起来像这样解决了我的问题。但这是一个标准吗？这是正确的做法吗？这对未来有什么影响吗？

【问题讨论】：

为了更好地帮助您，我认为我们需要查看您的 html+css 的摘录，至少对于 3 个元素 - 页眉、页脚、内容。可能只需要定位和尺寸属性。我也不完全明白你的问题。您说您解决了问题中的问题，那么问题是什么？
请将您的代码添加到 jsfiddle.net 并在您的帖子中分享链接。
如果您要征求意见最好的方法是什么，那么恐怕这超出了本网站的范围。现在，如果您要在这里询问有关此设置的问题，那将是另一回事。例如，如何摆脱那个讨厌的垂直滚动条...
位置：修复了过去在便携式设备上的问题，特别是在 Safari 上。此外，您的情况不需要它。
@Lain 好吧，如果你想避免calc...

标签： html css responsive-design

【解决方案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>

【讨论】：

我无法理解，为什么在这种情况下你同时使用 height:100% 和 max-height:100% ？有什么原因吗？
@HARSHA LANKA：这是测试各种方法的剩余部分。