代码之家 › 专栏 › 技术社区 › punkish

如何确定div是否比viewport高[duplicate]

css html javascript

punkish · 技术社区 · 6 年前

我有一个简单的2列布局,带有一个页脚,可以清除标记中的左右div。我的问题是我不能让页脚停留在所有浏览器的页面底部。如果内容将页脚向下推,则会起作用,但情况并非总是如此。

0 回复 | 直到 5 年前

Ferit 4 年前

要获得粘性页脚:

<div> 具有 class="wrapper" 为了你的内容。
之前 </div> 的 wrapper <div class="push"></div>
赖特之后结束语 < 的 包装纸 <div class="footer"></div>

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

kiko carisse 5 年前

使用CSS vh单元!

可能最明显和最不老套的方法是利用新的 css viewport units .

以以下简单标记为例:

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

如果页眉是80px高,而footer是40px高,那么我们可以制作粘性页脚

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

至少视口高度的100%减去页眉和页脚的组合高度。

就这样。

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

* {
余量:0;
填充:0;
}
背景:黄色;
高度:80px;
.内容{
最小高度:calc(100vh-120px);
/*80px页眉+40px页脚=120px*/
页脚{
高度:40px;
}

<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

1) 页眉和页脚的高度必须已知

caniuse )

see here )所以没有问题。但是,如果您希望避免使用calc,那么您可以使用负边距和使用框大小填充来解决这一问题-

* {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">Lorem ipsum 
</div>
<footer>
    This is my footer
</footer>

cssyphus 4 年前

粘滞页脚 `display: flex`

Philip Walton's sticky footer .

解释

这个解决方案是 valid only for :

火狐20.0
Internet Explorer 10

它基于 flex display ,利用 flex-grow 成长在任何一个高度宽度 (当 flow-direction column 或 row 分别),以占用容器中的额外空间。

vh 单位,在哪里 1vh 是 defined as :

视口高度的1/100

因此高度 100vh

这是您如何组织您的网页:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

为了使页脚粘在页面的底部,您希望正文和页脚之间的空间与将页脚推到页面底部所需的空间一样大。

因此,我们的布局变成:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

实施

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

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}

<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

the JSFiddle .

狩猎癖好

请注意,Safari有一个 flawed implementation of the flex-shrink property ,允许项目收缩超过显示内容所需的最小高度。要解决此问题,必须设置 弹性收缩 .content 以及 footer

.content {
  flex-shrink: 0;
}

.footer {
  flex-shrink: 0;
}

或者,更改 弯曲 为 spacer 元素到:

.spacer {
  flex: 1 0 auto;
}

此3值速记样式相当于以下完整设置:

.spacer {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

优雅的作品无处不在。

如何确定div是否比viewport高[duplicate]

使用CSS vh单元!

粘滞页脚 display: flex

解释

实施

狩猎癖好

粘滞页脚 `display: flex`