腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么页脚在页面最小化/调整大小时变为空白？

问为什么页脚在页面最小化/调整大小时变为空白？
EN

Stack Overflow用户

提问于 2017-02-11 18:03:49

回答 2查看 41关注 0票数 0

当我试图最小化此页/将其调整为比我的屏幕更小的大小时，特别是当它以垂直方式最小化时(页面的高度大于宽度)，页脚变成空白/白色，背景图像变得更短。

看看这里。

<!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>

CSS

*{
    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;
}

背景图像是一个url，所以需要一些时间在编辑器中发布代码，以了解我的意思。

为朋友干杯，

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-02-11 18:09:11

因为当视口狭窄时，.center-container的背景没有覆盖整个div。您的页脚不会变成空白……当.center-container的背景图像没有覆盖该元素的底部时，它只是位于白色背景上，因此页脚上的白色文本/链接意味着看不到页脚的内容。

将背景更改为background-size: cover将确保在调整窗口大小时将背景应用于整个div，而不管.center-container的形状如何。

* {
  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: cover;
  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;
}

<!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>

票数 0

Stack Overflow用户

发布于 2017-02-11 18:15:25

你的问题

背景图像是一幅景观图像。调整页面大小将调整图像的大小，但只在其比例范围内(它受到限制)。

当您调整到图像无法覆盖某些页面的区域时，页脚(带有白色文本)将出现在页面背景的顶部(即白色)，因此文本看起来会“消失”。

解决方案

解决这一问题的一种方法是将background-size:cover样式添加到.container_center中，关闭图像大小调整的约束，并使其填充可见区域。请注意，在某些情况下，这将裁剪图像，对于真正的大显示器的人，它可能看起来很紧张。
但是，您也可以(而且应该)使用媒体查询创建一个移动站点视图，只需在这一点上更改站点的总体外观--有些链接会在较小的屏幕宽度消失……

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42183457

复制

相似问题

问为什么页脚在页面最小化/调整大小时变为空白？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么页脚在页面最小化/调整大小时变为空白？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么页脚在页面最小化/调整大小时变为空白？
EN