頁腳不會一直延伸到頁面的右邊緣

目標：我正在嘗試實現如腳本on this page所述的CSS腳註。頁腳不會一直延伸到頁面的右邊緣

問題：頁腳未觸及頁面的右側邊緣。

我有我的頁面剝離下來仍出現此問題，下面簡單的情況：

HTML：

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

    <link href="my.css" rel="stylesheet"> 

</head> 

<body> 



<div class="row footer"> 
</div> <!-- end of row footer --> 

</body> 
</html>

CSS：

html { 
height: 100%; /* the footer needs this */ 
box-sizing: border-box; 
} 


body { 
position: relative; 
padding-top: 80px; 
padding-bottom: 100px; /* the footer needs this */ 
min-height: 100%; /* the footer needs this */ 
} 

.footer { /* footer trick learned from https://codepen.io/cbracco/pen/zekgx */ 
position: absolute; 
bottom: 0; 
width: 100%; 
height: 100px; 
background-color: #eee; 
}

我怎樣才能讓頁腳延長一直到右邊？起初我以爲這與Boostrap（我在頁面的「真實」版本中使用）有關，但這似乎不是原因。

我試着添加「padding-right：0」到頁腳類，但它沒有效果。

來源

2016-09-28 lara michaels

請在某處創建[mcve]。 – CBroe

所以你需要文字對齊？ –

您的頁腳有一個row類，它會將margin-left: -15px; margin-right: -15px添加到您的頁腳。（它來自Bootstrap）造成差距。

您可以將left: 15px; right: 15px添加到頁腳或刪除row類。

參見：https://jsfiddle.net/vw489p0n/2/

來源

2016-09-28 11:46:44 adamk22

你幾乎得到了這個：

的Html

<div class="row nopadding"> 
     <div class="col-md-12 nopadding"> 
      <div class=" footer"> 
       <div class="col-md-6"> 
        <!--links--> 
       </div><!-- end of col-6--> 
       <div class="col-md-6"> 
       <!--Contact--> 
       </div><!-- end of col-6--> 
      </div> <!-- end of footer --> 
     </div> <!-- end of col-12--> 
</div> <!-- end of row-->

CSS：

html { 
    height: 100%; /* the footer needs this */ 
    box-sizing: border-box; 
    } 
    body { 
    position: relative; 
    padding-top: 80px; 
    padding-bottom: 100px; /* the footer needs this */ 
    min-height: 100%; /* the footer needs this */ 
    margin:0; 
    } 
    .footer { /* footer trick learned from https://codepen.io/cbracco/pen/zekgx */ 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 100px; 
    background-color: #009688; 
    }   
    .nopadding{ 
    margin:0 !important; 
    padding:0 !important;  
    }

DEMO：https://jsfiddle.net/edfyv1e3/1/

來源

2016-09-28 11:49:07

.footer { 
    margin:0; 
}

給margin:0到你的排腳 class。

或給你body到margin:0

來源

2016-09-28 11:50:04

清除體內填充和下方添加頁腳CSS。

body { 
     position: relative; 
     margin: 0; 
     padding-bottom: 6rem;/* remove padding*/ 
     min-height: 100%; 
     font-family: "Helvetica Neue", Arial, sans-serif; 
    } 
.footer {  
     padding: 1rem; 
     background-color: #efefef; 
     text-align: center; 
    }

來源

2016-09-28 11:53:10 Kannan

根據Bootstrap，你遇到了一個小問題。在Bootstrap文檔中，他們是sainy：始終將row元素包裝在container之內。必須這樣做，因爲row類爲它的孩子添加了一個邊距。爲了避免（或者假設否定），你需要將它們包裝在container中。

所以您的標記應該是這樣的：

<div class="container"> 
    <div class="row footer"> 
    </div> 
    <!-- end of row footer --> 
</div>

沒有任何其它必要的修改。

來源

2016-09-28 11:57:07 Aer0

實際上，用戶代理默認情況下會對身體應用一些保證金，因此如果通過向身體添加保證金屬性來消除該保證金，將會解決此問題。請參考下面的css

body { 
position: relative; 
padding-top: 80px; 
margin : 0px; 
padding-bottom: 100px; /* the footer needs this */ 
min-height: 100%; /* the footer needs this */ 
}

來源

2016-09-28 12:15:27

頁腳不會一直延伸到頁面的右邊緣

回答

相關問題