我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm),有一个脚注,我不能坐在页面的底部。

我想让页脚

当页面较短且屏幕未被填充时,坚持在窗口底部 当有超过一个屏幕的内容时,保持在文档末尾,并像往常一样向下移动(而不是重叠内容)。

CSS是继承的,让我困惑。我似乎不能正确地改变它,把一个最小高度的内容或使页脚到底部。


当前回答

我在我的许多项目中都使用过,从来没有遇到过任何问题:)

供您参考,代码片段

* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */ height: 100%; margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ background:green; } .footer, .push { height: 50px; /* .push must be the same height as .footer */ } .footer{ background:gold; } <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <div class="wrapper"> Content Area </div> <div class="push"> </div> <div class="footer"> Footer Area </div> </body> </html>

其他回答

位置固定,底部,左边和右边设置为0最适合我:

.footer {    
    position: fixed;
    background : #d1ccc0;
    bottom : 0;
    left : 0;
    right : 0;
    height : 50px;
}

绝对位置不会粘在底部,但固定位置会。

下面是我的4种不同的方法:

在每个示例中,文本都是可自由编辑的,以说明内容在不同场景中的呈现方式。


1) 弹性框

车身{min-height: 100vh;保证金:0;} 标题{最低高度:50 px;背景:浅蓝色;} 页脚{最低高度:50 px;背景:番木瓜;} /*文章把页眉和页脚之间的空格都填满了*/ 身体{显示:flex;flex-direction:列;} 文章{flex: 1;} <身体> <头contentEditable >标题头> < / <文章contentEditable > < / >文章内容 <页脚contentEditable >页脚> < /页脚 < /身体>


2)网格

身体{ 最小高度:100 vh; 保证金:0; 显示:网格; Grid-template-rows: auto 1fr auto; } 标题{ 最小高度:50 px; 背景:浅蓝色; } 页脚{ 最小高度:50 px; 背景:番木瓜; } <身体> <头contentEditable >标题头> < / <文章contentEditable > < / >文章内容 <页脚contentEditable >页脚> < /页脚 < /身体>


下面的方法使用了一个“技巧”,在body上放置一个::after伪元素,并将其设置为与footer相同的高度,因此它将占据与footer相同的空间,因此当footer绝对定位在它上面时,它将看起来像footer真的占据了空间,并消除了它的绝对定位的负面影响(例如,越过body的内容)

3)位置:绝对(无动态页脚高度)

body{ min-height:100vh; margin:0; position:relative; } header{ min-height:50px; background:lightcyan; } footer{ background:PapayaWhip; } /* Trick: */ body { position: relative; } body::after { content: ''; display: block; height: 50px; /* Set same as footer's height */ } footer { position: absolute; bottom: 0; width: 100%; height: 50px; } <body> <header contentEditable>Header</header> <article contentEditable>Content</article> <footer contentEditable>Footer</footer> </body>


4)表布局

html{高度:100%;} Body {min-height:100%;保证金:0;} 标题{ 高度:50 px; 背景:浅蓝色; } {条 高度:1%; } 页脚{ 高度:50 px; 背景:番木瓜; } /****技巧:****/ 身体{ 显示:表; 宽度:100%; } Body > footer { 显示:作用是; } <身体> <头contentEditable >标题头> < / <文章contentEditable > < / >文章内容 <页脚contentEditable >页脚> < /页脚 < /身体>

<!DOCTYPE html>

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

<body>
   <header class='header'></header>
   <div class="body-content">
     <!-- all other page content -->
   </div>
   <footer class="footer"></footer>
</body>

</html>

html,
body{
  height:100%;
}
body {
  display:flex,
  flex-direction: column,
}

.body-content {
  flex-grow:1   
}

我的jQuery方法,这一个把页脚放在页面的底部,如果页面内容小于窗口高度,或者只是把页脚放在内容之后,否则:

此外,在其他代码之前将代码保存在自己的附件中,将减少重新定位页脚所需的时间。

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

我刚才在这里回答了类似的问题

在页眉固定的页面底部放置页脚

我在网页开发方面是新手,我知道这个问题已经有了答案,但这是我发现的最简单的解决方法,我认为在某种程度上是不同的。我想要一些灵活的东西,因为我的网页应用程序的页脚有一个动态高度,我最终使用了FlexBox和一个间隔。

首先设置html和body的高度

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

我假设我们的应用程序的列行为,在这种情况下,你需要添加一个标题,英雄或任何垂直对齐的内容。

创建spacer类

.spacer {
    flex: 1; 
}

之后你的HTML可能是这样的

<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

你可以在这里玩 https://codepen.io/anon/pen/xmGZQL