个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 13:13:33 25 4
gpt4 key购买 nike

我的网页中有一个粘性页眉和粘性页脚。在这两者之间，内容是动态生成的。但是如果内容小于屏幕或设备高度，它看起来很奇怪(有白色背景的空间)。应该怎么办如果我想让我的页面看起来完全被占用，我会这样做吗？给 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>
    <!--
        "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 - 我可以从 html 开始为所有容器提供 100% 的高度吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30795573/

25 4 0
文章推荐： c++ - 有没有办法在 Sming IDE (ESP8266) 中使用 std::map？
文章推荐： java - 如何模拟junit覆盖率的异常？
文章推荐： c++ - 链接目标文件时链接器命令失败，退出代码为 1
文章推荐： css - PNG 图像在针对 Retina 缩放 50% 时看起来很奇怪
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com