Fatal编程技术网
  • css/
  • CSS使HTML页面页脚保持在页面底部的最小高度，但不与页面重叠

CSS使HTML页面页脚保持在页面底部的最小高度，但不与页面重叠

css

CSS使HTML页面页脚保持在页面底部的最小高度，但不与页面重叠,css,footer,Css,Footer,我有以下页面（死链接：http://www.workingstorage.com/Sample.htm）有一个页脚，我无法将其放在页面底部 我希望页脚 当页面较短且屏幕未填满时，请粘到窗口底部，然后 当有超过一个屏幕的内容（而不是重叠内容）时，请停留在文档末尾并按正常方式向下移动 CSS是继承的，让我很困惑。我似乎无法正确地更改它，以便在内容上设置最小高度或使页脚位于底部。这称为粘性页脚。A因为它产生了很多结果。就是我成功使用的那个。但还有更多 *{ 保证金：0； } html，正文{ 身

我有以下页面（死链接：
http://www.workingstorage.com/Sample.htm
）有一个页脚，我无法将其放在页面底部

我希望页脚

  • 当页面较短且屏幕未填满时，请粘到窗口底部，然后
  • 当有超过一个屏幕的内容（而不是重叠内容）时，请停留在文档末尾并按正常方式向下移动
CSS是继承的，让我很困惑。我似乎无法正确地更改它，以便在内容上设置最小高度或使页脚位于底部。

这称为粘性页脚。A因为它产生了很多结果。就是我成功使用的那个。但还有更多

*{
保证金：0；
}
html，正文{
身高：100%；
}
.包装纸{
最小高度：100%；
高度：自动！重要；
身高：100%；
保证金：0自动-4em；
}
.footer、.push{
高度：4em；
}

你的网站内容在这里

版权所有（c）2008
一个简单的方法是使页面的正文
100%
，最小高度
100%
。如果页脚的高度没有改变，这可以正常工作

为页脚提供负页边距顶部：

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}
需要警惕的一件事是移动设备，因为它们以“不同寻常”的方式实现了视口的概念：

因此，使用
位置：固定
（正如我在其他地方看到的建议）通常不是一种方法。当然，这取决于你追求的确切行为

我使用过的，并且在桌面和移动设备上运行良好的是：

<body>
    <div id="footer"></div>
</body>
从IE7开始，您只需使用

#footer {
    position:fixed;
    bottom:0;
}
请参阅以获取支持

我自己一直在研究这个问题。我见过很多解决方案，每一个都有问题，经常涉及一些神奇的数字

因此，利用各种来源的最佳实践，我提出了以下解决方案：

我想在这里特别实现的是让主要内容在绿色区域内的页脚和页眉之间滚动

下面是一个简单的css：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}
我的jquery方法，如果页面内容小于窗口高度，则将页脚放在页面底部，否则只将页脚放在内容之后：

此外，在其他代码之前将代码保存在自己的存储模块中可以减少重新定位页脚所需的时间

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
一种非常简单的跨浏览器方法是：

html，
身体{
保证金：0；
填充：0；
身高：100%；
}
#容器{
最小高度：100%；
位置：相对位置；
}
#标题{
背景：#ff0；
填充：10px；
}
#身体{
填充：10px；
填充底部：60px；/*页脚高度*/
}
#页脚{
位置：绝对位置；
底部：0；
宽度：100%；
高度：60px；/*页脚高度*/
背景：#6cf；
}

标题
身体
页脚
以下是我的4种不同方法： 在每个示例中，文本都可以自由编辑，以说明内容在不同场景中的呈现方式

1） 柔性箱 
body{高度：100vh；边距：0；}
标题{最小高度：50px；背景：lightcyan；}
页脚{最小高度：50px；背景：PapayaWhip；}
/*诡计*/
正文{
显示器：flex；
弯曲方向：立柱；
}
页脚{
页边顶部：自动；
}

标题
内容
页脚
只需将html、正文和除页脚以外的其他行设置为100%。 e、 g

然而，另一个非常简单的解决方案是：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

诀窍是对整个文档使用
display:table
，对页脚使用
display:table row
和
height:0

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
由于页脚是唯一一个显示为
表行的正文子项，因此页脚呈现在页面底部。
我使用的一个简单解决方案，适用于IE8+

在html上给出最小高度：100%，这样，若内容较少，那个么页面将采用全视图端口高度，页脚将固定在页面底部。当内容增加时，页脚会随着内容向下移动，并一直粘着底部

JS小提琴工作演示：

Css
Html



这是我的两分钱。与其他解决方案相比，不需要添加额外的容器。因此，此解决方案更为优雅。在代码示例下面，我将解释为什么这样做有效


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>




测试
html
{
身高：100%；
}
身体
{
最小高度：100%；
填充：0；/*不需要，否则页眉和页脚标记具有填充和边距*/
边距：0；/*见上述注释*/
}
身体
{
位置：相对位置；
填充底部：60px；/*与页脚高度相同。*/
}
页脚
{
位置：绝对位置；
底部：0px；
高度：60px；
背景色：红色；
}
标题
页脚


所以我们要做的第一件事，就是100%地制作最大的容器（html）。html页面与页面本身一样大。接下来我们设置主体高度，它可以大于html标记的100%，但它至少应该与html标记一样大，因此我们使用最小高度100%

我们也使身体相对。相对意味着您可以相对地从其原始位置移动块元素。但是我们这里不使用这个。因为亲戚有第二个用途。任何绝对元素对根（html）或第一个相对父/祖辈都是绝对的

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}



html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}



   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>



<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>



.allButFooter {
    min-height: calc(100vh - 40px);
}



.allButFooter {
    min-height: calc(100vh - 95px); 
}



<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>



.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}



<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>



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

main {
    display: block;
    flex: 1 0 auto;
}



<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>



$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");



.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}



.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}



 <div class="footer">
   Footer is always bootom
 </div>



footer {
  margin-top:calc(5% + 60px);
}



<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}



    <div>
      <div class="register">
         /* your content*/    
      </div>
      <div class="footer" />
  <div/>



.register {
          min-height : calc(100vh - 10rem);
  }

.footer {
         height: 10rem;
 }



body {
    display: grid;
    grid-template-rows: auto auto auto;
}

footer {
    display: grid;
    align-self: end; /* The trick */
}




<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <header>
    Header content
  </header>
  
  <h1>main body</h1>
  <p>This is a paragraph.</p>
  
  <footer>
    <p>Hello there.</p>
  </footer>
</body>
</html>



#container{ 
  height:100vh; 
  margin:0; 
  display:flex; 
  flex-direction:column; 
}

#footer{
  margin-top:auto; 
}


<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>