页脚不会一直延伸到页面的右边缘

目标：我正在尝试实现如脚本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

页脚不会一直延伸到页面的右边缘

回答

相关问题