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

时间：2017-02-12 02:03:49

标签： html css html5 css3

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

看看这里。

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

背景图片是一个网址，所以请花一些时间在您的编辑器中发布代码，看看我的意思。

干杯啦，

2 个答案:

答案 0 :(得分：0)

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

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

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

答案 1 :(得分：0)

您的问题

背景图像是风景图像。调整页面大小将调整图像大小，但仅限于其比例（受限制）。

当您调整图像不会覆盖部分页面的区域时，页脚（带有白色文本）将出现在页面背景的顶部（白色），因此文本似乎“消失” ”

解决方案

  • 解决此问题的一种方法是将background-size:cover样式添加到.container_center，以关闭图像大小调整的约束，并使其填充可见区域。请注意，在某些情况下，这会裁剪图像，对于真正大显示器的人来说，它可能会显得拉长。

  • 但，您可以（也应该）使用media queries制作移动网站视图，只需更改网站的整体外观在那一点上 - 你的一些链接会以较小的屏幕宽度消失......

相关问题
最新问题