在移动视图和桌面视图中，使页脚都停留在页面底部

时间：2018-08-04 06:27:16

标签： html css footer

在移动视图中，页脚未保留在页面底部。它停留在底部上方的某个位置。我希望页脚在移动视图和桌面视图中始终保持在底部。但是页脚并不总是可见的，如果站点中的内容很多，则用户必须向下滚动才能看到页脚。我需要在css文件中进行哪些更改，以使页脚始​​终位于页面底部？

html { height: 100%; }
body {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
	color:#303036;
	margin:0px;
	background:url('../images/diagonal_noise.png');
	background-repeat:repeat;
	min-width:1100px;
	overflow:auto;
	height:100%; 
}

 #mainPart{
    margin:0 auto;
    }
    
 .container{
	overflow:hidden;
	clear:both;
	max-width:1080px;
	margin:20px auto 40px auto;
}
footer {
  color: white;
  width:100%;
  padding:0;
  display:block;
  clear:both;
  height: 40px; /* added */
}

.footrow{
	overflow:hidden;
	background-color: #111;
	display:block;
	
}

.footrow2{
	overflow:hidden;
	background-color: #002c42;
	display:block;
	padding:15px;
}

.foot{
	max-width:1080px;
	margin:0 auto;
	font-size:11px;
	line-height:18px;
}

.foot-p{
	font-weight: 600;
	padding:2px;
	color:#66e355 !important;
}

.half-width {
    width: 50%;
	float:left;
}

.quarter-width {
    width: calc(25% - 30px);
	float:left;
	padding:15px;
}

#social2 {
    display: block;
    background-color: transparent;
    float: left;
    margin: 0 auto;
}

.sc-icn2 {
    width: 50px;
    height: 50px;
    display: block;
    margin-right: 5px;
    margin-bottom: 5px;
    float: left;
} 
 <html>
        <head>

</head>
 <body>
    <div id="mainPart">

    </div>
    <div class="container">

    </div>
    
    <footer>
    <div class="footrow" >
        <div class="foot">
            <div class="quarter-width">
                
                <div>
                   
                </div>
            </div>
            <div class="quarter-width">
                
            </div>
            <div class="quarter-width">
               
                <div id="social2">
                    
                </div>
            </div>
            <div class="quarter-width">
        
            </div>
        </div>
    </div>
    <div class="footrow2"   >
        <div class="foot">
            <div class="half-width">
            </div>
            <div class="half-width">
            </div>
        </div>
    </div>
</footer>
  
</body>

</html>

4 个答案:

答案 0 :(得分：1)

要获得该结果，请将页脚位置定义为底部。 position: absolute; bottom: 0;

position属性指定用于元素的定位方法的类型。 absolute元素相对于其第一个定位的祖先元素body进行定位，正如您在body css规则中所见，该元素位于relative的正常位置。

有关position属性的更多信息，请参见here。

html {
 position: relative;
 min-height: 100%;
 height: 100%;
 overflow-x: hidden;
 overflow-y: scroll;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  overflow-x: hidden;
  margin: 0px;
  position: relative;
  min-height: 100%;
  height: auto;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

/**
 * Footer Styles
 */

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #34495e;
  color:#fff;
  text-align: center;
}
<div class="demo">
  <h1>Footer Stays Bottom</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue nunc at ex ultricies molestie. Cras in tempor turpis. Suspendisse et aliquam nisl. Vestibulum semper nibh at nibh dignissim, ac dapibus lorem facilisis. Donec rhoncus lacus sit amet risus dapibus sollicitudin. Ut vitae auctor dolor, et molestie nunc. Maecenas iaculis ante in tincidunt finibus. Etiam vehicula odio a lorem varius sagittis. Suspendisse sed purus at justo porta blandit quis at quam. Sed vitae faucibus nulla. Sed tincidunt tellus sapien, eu pulvinar nisi suscipit sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget felis ultricies, iaculis est eu, posuere nulla.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue nunc at ex ultricies molestie. Cras in tempor turpis. Suspendisse et aliquam nisl. Vestibulum semper nibh at nibh dignissim, ac dapibus lorem facilisis. Donec rhoncus lacus sit amet risus dapibus sollicitudin. Ut vitae auctor dolor, et molestie nunc. Maecenas iaculis ante in tincidunt finibus. Etiam vehicula odio a lorem varius sagittis. Suspendisse sed purus at justo porta blandit quis at quam. Sed vitae faucibus nulla. Sed tincidunt tellus sapien, eu pulvinar nisi suscipit sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget felis ultricies, iaculis est eu, posuere nulla.</p>


</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

答案 1 :(得分：0)

要使页脚停留在页面底部，只需在适用于页脚的CSS块中添加spec.source.git.ref和position: absolute;。因此它将变为：

bottom: 0;

答案 2 :(得分：0)

这对您有用。试试吧。

为此，请在.container div中添加足够的内容。 并将min-height的值添加到.container，如下所示。

body {
   font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
   color:#303036;
   margin:0px;
   background:url('../images/diagonal_noise.png');
   background-repeat:repeat;
   min-width:100%;
   overflow:auto;
   height:100%; 
 }
.container{
   overflow:hidden;
   clear:both;
   max-width:1080px;
   margin:20px auto 40px auto;
   /*new style*/
   min-height:768px;
 }
 @media only screen and (max-width: 768px) {
   .container{
      max-width: 80%;
      margin:20px auto 40px auto;
      min-height:480px;
   }
 } 


    html { height: 100%; }
    body {
        font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
        color:#303036;
        margin:0px;
        background:url('../images/diagonal_noise.png');
        background-repeat:repeat;
        min-width:100%;
        overflow:auto;
        height:100%; 
    }
    
     #mainPart{
        margin:0 auto;
        }
     .container{
        overflow:hidden;
        clear:both;
        max-width:1080px;
        margin:20px auto 40px auto;
        min-height:768px;
    }
    footer {
      color: white;
      width:100%;
      padding:0;
      display:block;
      clear:both;
      height: 40px; /* added */
    }
    
    .footrow{
        overflow:hidden;
        background-color: #111;
        display:block;
    
    }
    
    .footrow2{
        overflow:hidden;
        background-color: #002c42;
        display:block;
        padding:15px;
    }
    
    .foot{
        max-width:1080px;
        margin:0 auto;
        font-size:11px;
        line-height:18px;
    }
    
    .foot-p{
        font-weight: 600;
        padding:2px;
        color:#66e355 !important;
    }
    
    .half-width {
        width: 50%;
        float:left;
    }
    
    .quarter-width {
        width: calc(25% - 30px);
        float:left;
        padding:15px;
    }
    
    #social2 {
        display: block;
        background-color: transparent;
        float: left;
        margin: 0 auto;
    }
    
    .sc-icn2 {
        width: 50px;
        height: 50px;
        display: block;
        margin-right: 5px;
        margin-bottom: 5px;
        float: left;
    }
    @media only screen and (max-width: 768px) {
     .container{
        max-width: 80%;
        margin:20px auto 40px auto;
        min-height:480px;
      }
    } 
  
    <html>
        <head>        
        </head>
         <body>
            <div id="mainPart"></div>
            <div class="container">
              <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
              </p>
            </div>        
            <footer>
            <div class="footrow" >
                <div class="foot">
                    <div class="quarter-width">        
                        <div>        
                        </div>
                    </div>
                    <div class="quarter-width">       
                    </div>
                    <div class="quarter-width">        
                        <div id="social2">        
                        </div>
                    </div>
                    <div class="quarter-width">        
                    </div>
                </div>
            </div>
            <div class="footrow2">
                <div class="foot">
                    <div class="half-width">
                    </div>
                    <div class="half-width">
                    </div>
                </div>
            </div>
        </footer>        
        </body>        
    </html>

答案 3 :(得分：0)

您可以通过多种方式执行此操作：

包装纸的底边距为负

有一个包装元素，可容纳除页脚以外的所有内容。它的负边距等于页脚的高度。

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
.content {
  padding: 20px;
  min-height: 100%;
  margin: 0 auto -50px;
}
.footer,
.push {
  height: 50px;
}
footer {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}
<div class="content">
  
  <h1>Sticky Footer with Negative Margin 1</h1>
</div>

<footer class="footer">
  Footer 
</footer>

页脚的负上边距

此技术不需要push元素，而是需要在内容周围附加一个环绕元素，以在其中应用匹配的底部填充。再次防止底边距使页脚超出任何内容。

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
  background: red;
}
<div class="content">
  <div class="content-inside">
    content
  </div>
</div>
<footer class="footer"></footer>

有calc（）个高度降低的包装器 

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.content {
  min-height: calc(100vh - 70px);
  padding: 40px 40px 0 40px;
}
.footer {
  height: 50px;
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}
<div class="content">
  <h1>Sticky Footer with calc()</h1>
</div>

<footer class="footer">
  Footer 
</footer>

您还可以使用flexbox 

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.content {
  flex: 1 0 auto;
  padding: 20px;
}
.footer {
  flex-shrink: 0; 
  padding: 20px;
  background: #42A5F5;
  color: white;
}
<div class="content">
  <h1>Sticky Footer with Flexbox</h1>
</div>

<footer class="footer">
  Footer 
</footer>

相关问题
最新问题