移動視圖下的頁腳空白處

經過這麼多努力，終於爲我的網站設計了頁腳。但是，無論何時我減少移動視圖中的瀏覽器大小，我的頁腳下方都會留下一個空白區域。這是因爲桌面視圖中的頁腳內容添加了頁邊空白。我也不想改變頁腳內容的排列方式。我嘗試了很多東西，但仍然無法擺脫那個空白空間。移動視圖下的頁腳空白處

HTML：

<div class="footer" style="font-family: Georgia,Serif;"> 
    <div class="container"> 
    <div class="col-md-4 col-sm-4"> 
     <ul class="list-unstyled list-inline" style="margin-left:50px"> 
     <li><a style="color:white;font-size:20px" href="AboutUs.aspx">About Us</a></li> 
     <li><a style="color:white;font-size:20px" href="ContactUs.aspx">Contact Us</a></li> 
     </ul> 
    </div> 
    <div class="col-md-4 col-sm-4"> 
     <p style="color:white;text-align:center;font-size:15px;margin-top:48px">© 2016 Ashwini All Rights Reserved</p> 
    </div> 
    <div class="col-md-4 col-sm-4"> 
     <ul class="social-icons icon-circle list-unstyled list-inline" style="float:right"> 
     <li> <a href="http://www.facebook.com"><i class="fa fa-facebook"></i></a></li> 
     <li> <a href="http://www.twitter.com"><i class="fa fa-twitter"></i></a></li> 
     <li> <a href="http://www.google-plus.com"><i class="fa fa-google-plus"></i></a></li> 
     </ul> 
    </div> 
    </div> 
</div>

CSS：

.footer { 
    position: absolute; 
    right: 0; 
    bottom: 0 !important; 
    left: 0; 
    padding: 1rem; 
    background-color: #0E0E0E; 
    height:100px; 
}

來源

2016-03-08 Ash

是活？你可以發佈你的網站的鏈接嗎？... –

不，它不是。我正在爲我的項目開發它。我已經添加了圖像。 – Ash

您是否嘗試過使用'@ media'？ –

您可以刪除手機屏幕的高度。

您也可以將它們集中對齊以便移動。

@media only screen and (max-width: 767px) { 
    .footer { 
    height: auto; 
    } 
    .footer ul{ 
    text-align: center; 
    margin-left: 0; 
    padding-left: 0; 
    float: none; 
    } 
    .footer li{ 
    display: inline-block; 
    margin: 0 5px; 
    } 
}

https://jsfiddle.net/afelixj/3u3k4v06/

來源

2016-03-08 07:21:53

這不會改變任何東西..我是否需要重寫Bootstrap css或其他任何東西？ – Ash

我刪除了html中的內聯樣式。 –

現在問題出在移動視圖頁腳重疊了某些部分內容 – Ash

這裏的問題是，你的CSS是目前這樣的

.footer 
{ 
position: absolute; 
right: 0; 
bottom: 0 !important; 
left: 0; 
padding: 1rem; 
background-color: #0E0E0E; 
height:100px; 
}

其中高度的頁腳被固定爲100px。但是，您的HTML內容有三個這樣的<div class="col-md-4 col-sm-4"></div> div。您的第三行正在穿越100px的閾值。

你的最低高度更改爲一個更大的value.Better選擇是使用%或vh

.footer 
{ 
position: absolute; 
right: 0; 
bottom: 0 !important; 
left: 0; 
padding: 1rem; 
background-color: #0E0E0E; 
height:200px; 
color:white; 
}

這裏是工作demo

來源

2016-03-08 06:42:40

謝謝我這樣做。但我不想增加頁腳的大小，因爲它已經有了更少的內容，並且越來越多，看起來很奇怪。 – Ash

@Ashwini，看看這個[鏈接]（https://jsfiddle.net/dexgo195/1/） –

我試過這個，但該死的我不知道爲什麼這個空白區仍然顯示，並在該空間的社會圖標 – Ash

您可以overflow:hidden;

工作Codepen： http://codepen.io/anon/pen/EKPrEB

.footer 
{  
overflow: hidden; /*MODIFICATION */ 
padding-bottom:2px; /*MODIFICATION */ 
    position: absolute;  
    margin-bottom:0; 
right: 0; 
bottom: 0 !important; 
left: 0; 
background-color: #0E0E0E; 
height:100px;  
}

來源

2016-03-08 06:50:00 AVI

溢出不適用於我。任何想法如何使用媒體在移動視圖中增加頁腳大小？ – Ash

@Ashwini只是刪除填充：1rem，這將保持完美 – AVI

@Ashwini繼承人工作鏈接，我編輯了答案太http://codepen.io/anon/pen/qZbgPB – AVI

嘗試添加此css將解決該問題。

@media only screen and (max-width: 500px) { 
    .footer p{ 
     margin-top:0px !important; 
    } 
}

來源

2016-03-08 07:09:25

移動視圖下的頁腳空白處

回答

相關問題