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

问题描述 投票：0回答：5

在移动视图中，页脚不会保留在页面底部。它停留在底部上方的某个地方。我希望页脚在移动视图和桌面视图中始终保持在底部。但是页脚不应该总是可见的，如果网站内容很多，用户将不得不向下滚动才能看到页脚。我需要在 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>

html css footer
5个回答
1
投票

要使页脚停留在页面底部，您只需在适用于页脚的 CSS 块中添加 

position: absolute;
和 
bottom: 0;
即可。那么就会变成：

footer{
 color: white;
 width:100%;
 padding:0;
 display:block;
 clear:both;
 height: 40px; /* added */

 position: absolute;
 bottom: 0;
}
1
投票

要实现该结果，请将页脚位置定义为底部。 

position: absolute; bottom: 0;

position 属性指定元素使用的定位方法的类型。 

absolute
元素相对于其第一个定位的祖先元素（即 
body
）定位，正如您在 
body
css 规则中看到的，该元素被定位到 
relative
到其正常位置。

有关

position
房产的更多信息可以在这里找到。

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>

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>

页脚上边距为负值

此技术不需要推送元素，而是需要在内容周围有一个额外的包装元素，以在其中应用匹配的底部填充。再次防止负边距将页脚提升到任何内容之上。

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>

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>

0
投票
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    margin-top:auto;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.