网站搞笑移动设备

Question

所以我在我的移动设备上查看了我的网站，并且有一些我无法修复的错误。第一个是我网站的页脚。

http://www.webbmaster.com.au/web-programs/questdesign/

你可以看到我的页脚看起来扭曲了。有关如何修复移动设备的任何想法。这是我的页脚的css代码。

.footer {
background-color: #F6861F;
  color: #fff;
  padding: 20px 0;
  text-align: center;
  overflow: hidden;
  width: 100%;
}

另一个问题是页面底部有大量的空白区域。我该如何去除它？

非常感谢能帮我解决这个问题的人。

Answer 1

这是因为您按像素设置宽度。如果您指定高度，宽度（以像素为单位），则不能指望您的网站能够快速响应。

.body .container{

width:80%;

}
.navigation .nav-pills{

width:80%;

height:20%;

}

这应该会使您的网站在移动视图中看起来更容易接受。

修改

将此添加到您的css文件中。

@media screen and (max-width:767px){
   .body .container{ width:80%; height:100%;}
   .navigation .nav-pills{height:55px;width:100%;}
   .nav > li{float:left;}
   .nav-pills > li a{margin: 10px 10px;}
   .sliderr{height:340px;}
   .footer{margin-top:10%;}
}

尝试一下，如果您对此感到满意，请告诉我。我也不认为需要漂浮。这只是我的习惯：X

Answer 2

这对我来说很有用，我必须稍微检查一下我的整个CSS并进行编辑，但似乎工作得非常好：）

http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:1em;
    background:#5ee;
}
 #content {
    padding:1em;  
    padding-bottom:5em;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:5em;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

这适用于移动设备和网页，以保持页脚在那里。 不必在px中，我使用em's :)将其更改为em's，这对于wwebpage设置我觉得更好:) 然后Tou可以将其他项目放在绝对位置，只需要相对于wour Wrapper，这部分就是你的整个网页:) 最小高度100％的身体不会这样做，因为身体调整页面中的内容，因此，如果文本较少，它将不会伸展！ 希望ithis尽可能地帮助你：）