Html 当页面最小化/调整大小时，为什么页脚变为空白_Html_Css

Html 当页面最小化/调整大小时，为什么页脚变为空白

html css

Html 当页面最小化/调整大小时，为什么页脚变为空白,html,css,Html,Css,当我尝试最小化此页面/将其大小调整为小于屏幕的大小时，尤其是以垂直方式最小化（页面高度大于宽度）时，页脚变为空白/白色，背景图像变短看看这里 <!DOCTYPE html> <html> <head> <link href="style2.css" type="text/css" rel="stylesheet"> <link href="https://fonts.googleapis.com/cs

当我尝试最小化此页面/将其大小调整为小于屏幕的大小时，尤其是以垂直方式最小化（页面高度大于宽度）时，页脚变为空白/白色，背景图像变短

看看这里

<!DOCTYPE html>
<html>
    <head>
        <link href="style2.css" type="text/css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
        <script src="https://use.fontawesome.com/4c228f39e6.js"></script>
        <title>Magna Golf</title>
    </head>
    <body>
        <nav class = "top-navigator">
            <div class ="float-left"><a href="home2.html" target="_blank">Magna Golf</a></div>  
            <div class ="float-right">
                <ul>
                    <li class ="navi-links"><a href = "#">Contact Us</a></li>
                    <li class ="navi-links"><a href ="#"> Members Login</a></li>
                    <li class ="navi-links"><a href ="#">About Us</a></li>
                    <li class ="navi-links"><a href="#">Guests</a></li>
                    <li class ="navi-links"><a href="#">Adena Meadows</a></li>
                </ul>
            </div>
        </nav>


       <div class = "center-container">
                <div class ="logo"><img src ="horse.png" alt="Magna Golf Logo>" width="130px"</img>
                </div>

            <div class ="footer">
                <div class="footer-text">Check Us out on Social Media   
                </div>
                <div class="footer-social">
                    <ul>
                        <li class="social-links"><a class = "social" href="#" target="_blank">Facebook</a></li>
                        <li class="social-links"><a class = "social" href="#" target="_blank">Twitter</a></li>
                        <li class="social-links"><a class = "social" href="#" target="_blank">Instagram</a></li>        
                    </ul>
               </div>       
           </div>
        </div>
   </body>
</html>

背景图像是一个url，所以花点时间在编辑器中发布代码，看看我的意思

干杯，朋友们，

因为当视口狭窄时，

.center container

的背景不能覆盖整个div。您的页脚不会变为空白。。。当

.center container

的背景图像没有覆盖该元素的底部时，它只是定位在白色背景上，因此白色背景顶部页脚中的白色文本/链接意味着您无法看到页脚的内容

将背景更改为

background size:cover

将确保在调整窗口大小时，无论

.center container

的形状如何，背景都应用于整个div

*{
保证金：0；
填充：0；
框大小：边框框；
}
主体{}
a{
颜色：金色；
文字装饰：无；
}
a:悬停{
颜色：白色；
}
.顶级领航员{
宽度：100%；
高度：50px；
背景色：rgba（0,0,0,0.4）；
背景颜色：灰色；
}
.向左浮动{
颜色：金色；
字体系列：Cinzel，衬线；
字母间距：0.1米；
字距：0.0em；
宽度：160px；
字体大小：20px；
位置：相对位置；
最高：25%；
左缘：4%；
}
.向右浮动{
字体系列：Cinzel，衬线；
文本转换：小写；
字体大小：12px；
宽度：530px；
位置：相对位置；
左缘：58%；
底部：20%；
}
.导航链接{
显示：内联；
左边距：25px；
}
.中央集装箱{
宽度：100%；
高度：计算（100vh-50px）；
背景图像：url（“http://magnagolf.com/images/slideshow/bgd3.jpg");
背景尺寸：封面；
背景重复：无重复；
}
.标志{
宽度：75px；
位置：相对位置；
保证金：0自动；
顶部：12px；
}
.页脚{
宽度：100%；
位置：绝对位置；
高度：20px；
底部：0；
/*使页脚从下到下*/
/*
背景色：rgba（0,0,0,0.4）；
*/
}
.页脚文本{
宽度：300px；
高度：20px；
文本对齐：居中；
字体系列：Cinzel，衬线；
字体大小：14px；
颜色：白色；
位置：相对位置；
左缘：1%；
}
.footer社交网站{
字体系列：Cinzel，衬线；
字体大小：13px；
宽度：260px；
位置：相对位置；
底部：23px；
左缘：78%；
}
.社会联系{
显示：内联；
颜色：白色；
左边距：15px；
}
.社会{
颜色：白色；
}


麦格纳高尔夫







“宽度=“130px”
在社交媒体上查看我们

您的问题背景图像是横向图像。调整页面大小将调整图像大小，但仅在其比例范围内（受限制）

当您调整到图像不会覆盖部分页面的区域时，页脚（带有白色文本）将显示在页面背景（白色）的顶部，因此文本将看起来“消失”

解决

解决此问题的一种方法是将
```
背景尺寸：cover
```
样式添加到
```
.container\u center
```
，以关闭图像大小调整的限制，并使其填充可见区域。请注意，在某些情况下，这会裁剪图像，对于拥有超大显示器的人来说，图像可能会出现拉伸
然而，您也可以（也应该）使用创建移动站点视图，只需在此时更改站点的整体外观-一些链接在较小的屏幕宽度下消失

Michael Coker，先生，你真是个天才！非常感谢：）我会很快给你的帖子回复，stack说有时间限制。

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{

}

a{
    color:gold;
    text-decoration: none;
}

a:hover{
    color:white;
}
.top-navigator{
    width:100%;
    height:50px;
    background-color:rgba(0,0,0,0.4);
    backgroud-color:grey;

}

.float-left{
    color:gold;
    font-family:Cinzel, serif;
    letter-spacing: 0.1em;
    word-spacing: 0.0em;
    width:160px;
    font-size:20px;

    position:relative;
    top:25%;
    margin-left:4%;
}

.float-right{
    font-family:Cinzel, serif;
    text-transform:lowercase;
    font-size:12px;
    width:530px;
    position:relative;
    margin-left:58%;
    bottom:20%;
}


.navi-links{
    display:inline;
    margin-left:25px;
}


.center-container{
    width:100%;
    height:calc(100vh - 50px); 
    background-image:url("http://magnagolf.com/images/slideshow/bgd3.jpg"); background-size:100%;
    background-repeat: no-repeat;
}

.logo{
    width:75px;
    position:relative;
    margin:0 auto;
    top:12px;
}


.footer{
    width:100%;
    position:absolute;
    height:20px;
    bottom:0; /*to get footer to sick to bottom*/


    /*
    background-color:rgba(0,0,0,0.4);
    */
}


.footer-text{
    width:300px;
    height:20px;
    text-align:center;
    font-family:Cinzel, serif;
    font-size:14px;
    color:white;

    position:relative;

    margin-Left:1%;
}

.footer-social{
    font-family:Cinzel, serif;
    font-size:13px;
    width:260px;

    position:relative;
    bottom:23px;
    margin-left:78%;
}


.social-links{
    display:inline;
    color:white;
    margin-left:15px;   
}

.social{
    color:white;
}