Question

我在min-height: 100%

时遇到了一些问题

我希望页脚始终低于我的内容。这意味着，如果内容长于屏幕高度，则在您一直滚动到底部之前，您看不到页脚

此外，当内容短于屏幕高度时，页脚需要位于屏幕的底部。好吧，我以为我只是通过添加min-height: 100%

解决了这个问题

<html>
    <head>
        <style>
            html, body, main { min-height: 100% }
        </style>
    </head>
    <body>
        <main>
            <article> .... </article>
            <footer> ... </footer>
        </main>
    </body>
</htm>

DEMO

现在，由于某种原因，body标记似乎忽略了此设置，其高度只适合内容。

不幸的是，您不能将正文设置为100％（DEMO）

有任何建议如何解决这个问题？

Answer 1

粘性页脚String target ="test http://www.test1.com"; String http = "((http:\\/\\/|https:\\/\\/)?(www.)?(([a-zA-Z0-9-]){2,}\\.){1,4}([a-zA-Z]){2,6}(\\/([a-zA-Z-_\\/\\.0-9#:?=&;,]*)?)?)"; Pattern pattern = Pattern.compile(http); Matcher matcher = pattern.matcher(target); while (matcher.find()) { System.out.println(matcher.start() + " : " + matcher.end()); }通常使用页脚父元素上的'hack'和否定min-height来完成。直到根margin-bottom的所有父元素都需要html

height:100%;

JSFIDDLE LONG CONTENT

JSFIDDLE SHORT CONTENT

Answer 2

精彩的CSS Tricks网站在其Snippets区域中有一个粘性页脚的片段：

http://css-tricks.com/snippets/css/sticky-footer/

或者使用jQuery：

http://css-tricks.com/snippets/jquery/jquery-sticky-footer/

最新链接演示

或者您可以使用James Dean

中的Modern Clean CSS“Sticky Footer”

所以只需将HTML和CSS更改为：

<强> HTML

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <main>
        <article> .... </article>
    </main>
    <footer> ... </footer>
</body>
</html>

<强> CSS

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px; /* bottom = footer height */
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Demo here

Answer 3

我修改了你的css，把页脚和文章放在相对位置：

* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}

article {
  height: calc(100% - 50px);
  position: relative;
}

main {
  background-color:lightgray;
}
footer {
  background-color: green;
  height: 50px;
  position: relative;
  bottom: 0;
  width: 100%;
}

小提琴： http://jsfiddle.net/np9n4ckb/5/

Answer 4

如果您不想搞定位，可以使用UITextField个单位。 vh等于视口高度的1％。

（作为参考，这是一个很好的阅读：https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/）

小提琴：http://jsfiddle.net/np9n4ckb/6/

<强> CSS

1vh

Answer 5

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* browser reset */

html {
  height: 100%;
  position: relative;
  min-height: 100%: padding-bottom: 50px;
  /* equal to footer height */
}
body {
  height: 100%;
  color: #fff;
}
footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: #ccc;
}
header {
  background: #333;
}
main {
  background: tomato;
}

＆＃13;

<html>

<body>
  <header>Menu</header>
  <main>content of unknown height!!</main>
  <footer>footer always stays at bottom</footer>

</body>

</html>

＆＃13;

这正是你需要做的。

Answer 6

您可以使用display:flex：

＆＃13;

html,
body {
  padding: 0;
  margin: 0;
  height: 100%
}

main {
  min-height:100%;
  display: flex;
  flex-direction: column;
  background:blue;
}

article {
  flex-grow: 1;
  background:green;
}

footer {
  background:orange;
}

＆＃13;

<main>
  <article>... </article>
  <footer> ... </footer>
</main>

＆＃13;

最小高度不对身体起作用

6 个答案: