英文:
stick footer to bottom if actual page height is greater than html height
问题
我有一个情况，在页面上使用了多个滑块，因此页面的实际高度发生了变化。
假设我的 html 高度为 600 像素，但由于一些滑块，实际页面高度为 1000 像素。
因此，当我尝试使用 position: absolute 和 bottom: 0 来将页脚固定在底部时，它会放在 html 高度的末尾。
我使用了一个示例来展示我的情况是什么样的。
如果我使用 position: relative，那么在其他高度较小的页面上，它将不会在底部。
在这种情况下，我该如何将页脚固定在页面底部？
我还尝试过将整个 html 内容包装在一个类 .wrapper { height: 100%; display: flex; flex-direction: column; } 中，并为页脚使用 position: relative 和 margin-top: auto。
这在某种程度上有所帮助，但之后出现了与 html 之后的块的宽度有关的问题。
html {
height: 500px;
}
.main-content {
padding: 200px;
text-align: center;
}
.content {
padding: 300px;
text-align: center;
}
.footer {
padding: 40px 0;
position: absolute;
width: 100%;
bottom: 0;
text-align: center;
background: gray;
}
<html>
<div class="main-content">主要内容</div>
<div class="content">内容</div>
<footer class="footer">页脚</footer>
</html>
英文:
I have a situation where I use several sliders on the page due to which the actual height of the page changes
Let's say my html height is 600px but due to some sliders the actual page height is 1000px
And because of this, when I try to stick the footer to the bottom using position: absolute and bottom: 0, I have it placed at the end of the html height
I used an example to show how everything looks like for me
If I use position: relative then on other pages where the height is small, it will not be at the bottom
How can I stick the footer to the bottom of the page in this case?
I have also tried wrapping the entire html content in a class .wrapper { height: 100%; display: flex; flex-direction: column; } and for the footer use position: relative and margin-top: auto
This kind of helped, but then there were problems with the blocks that come after the html, they lost their width
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html {
height: 500px;
}
.main-content {
padding: 200px;
text-align: center;
}
.content {
padding: 300px;
text-align: center;
}
.footer {
padding: 40px 0;
position: absolute;
width: 100%;
bottom: 0;
text-align: center;
background: gray;
}
<!-- language: lang-html -->
<html>
<div class="main-content"> MAIN CONTENT</div>
<div class="content">CONTENT</div>
<footer class="footer">FOOTER</footer>
</html>
<!-- end snippet -->
答案1
得分: 1
你可以使用 flexbox。取消注释 body 中的 height 属性以查看更改。
在下面的代码中检查元素 html、body、main 和 footer。
资源：
CSS Tricks | Flexbox
CSS Tricks | Flexbox and Auto Margins
Dev | Stick Footer to The Bottom of The Page
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
/*height: 1000px;*/
}
header {
height: 50px;
background-color: cyan;
}
main {
flex: 1;
}
footer {
margin-top: auto;
height: 70px;
background-color: red;
}
<html>
<body>
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
</body>
</html>
英文:
You can use flexbox. Uncomment height property in body to see the changes.
Check the elements html, body, main and footer in the code below.
Resources: <br/>
CSS Tricks | Flexbox <br />
CSS Tricks | Flexbox and Auto Margins <br />
Dev | Stick Footer to The Bottom of The Page
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
/*height: 1000px;*/
}
header {
height: 50px;
background-color: cyan;
}
main {
flex: 1;
}
footer {
margin-top: auto;
height: 70px;
background-color: red;
}
<!-- language: lang-html -->
<html>
<body>
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
</body>
</html>
<!-- end snippet -->
答案2
得分: 0
解决这个问题的简单方法是在页脚前对块级元素设置最小高度，并放弃所有定位。
假设您想要一个高度为 50px 的页脚。那么在页脚前的元素应该至少有 100vh - 50px 的高度，以覆盖整个屏幕的高度，即使内容不是很大也可以。您可以使用 calc 来实现这一点。
body {
margin: 0;
}
.main-content {
background-color: red;
min-height: calc(100vh - 50px);
}
.footer {
height: 50px;
background: gray;
}
<body>
<div class="main-content"></div>
<footer class="footer"></footer>
</body>
我稍微简化了您的 HTML 结构。您可以将任何内容放在 main-content 中，页脚将保持在底部。例如，如果您将代码修改为 min-height: 200vh 而不是使用 calc...
body {
margin: 0;
}
.main-content {
background-color: red;
min-height: 200vh;
}
.footer {
height: 50px;
background: gray;
}
<body>
<div class="main-content"></div>
<footer class="footer"></footer>
</body>
...您会看到即使 main-content 比我在第一个代码片段中提供的要大，页脚仍然保持在页面底部。
英文:
An easy way to solve this issue is to set a minimum height on the block level element before the footer and to ditch all the positioning.
Let's say that you'd want to have a footer that's 50px high. Your element before that should be at least 100vh - 50px high in order to cover the full height of the screen even if the content isn't that big. You can do this with calc.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
margin: 0;
}
.main-content {
background-color: red;
min-height: calc(100vh - 50px)
}
.footer {
height: 50px;
background: gray;
}
<!-- language: lang-html -->
<body>
<div class="main-content"></div>
<footer class="footer"></footer>
</body>
<!-- end snippet -->
I took the liberty and simplified your HTML structure. You can place anything inside main-content and the footer will stay at the bottom. If you for example modify the code to have min-height: 200vh instead of the calc...
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
margin: 0;
}
.main-content {
background-color: red;
min-height: 200vh;
}
.footer {
height: 50px;
background: gray;
}
<!-- language: lang-html -->
<body>
<div class="main-content"></div>
<footer class="footer"></footer>
</body>
<!-- end snippet -->
...you can see that the footer stays at the bottom of the page even if main-content is bigger than what I provided in the first snippet.
答案3
得分: 0
网格布局非常适用于这些需要固定页脚/页眉/侧边栏以及其他滚动内容的设计。
在下面的示例中，有3行。在主内容上使用分数高度（1fr），它将在考虑其他行的高度后，基本上会填满网格中可用的空间。在这种情况下，页脚具有固定高度，并使用 max-content 作为其高度，而侧边栏使用自动高度，因此会根据其内容调整大小。调整各种 grid-template-rows 是非常强大的。
运行下面的代码片段，然后选择全屏选项，以查看它在不同视口大小下的工作方式。
英文:
Grid is awesome for these types of designs where you want to have a fixed footer/header/sidebar along with with some other scrolling content.
In the example below, there are 3 rows. Using a fractional for the height (1fr) on the main content, it will essentially grow to fill whatever space is available in the grid, after taking into account the height of the other rows. In this case, the footer has a fixed height and uses max-content for it's height, while the aside uses auto, so it grows to adjust to its contents. Playing with the various grid-template-rows is incredibly powerful.
Run the snippet below, and then choose the full page option to see how it works at different viewport sizes.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
}
html {
height: 100%;
}
body {
display: grid;
grid-template-rows: 1fr auto max-content;
height: 100%;
line-height: 1.5;
}
.main-content {
background-color: #ccc;
overflow-y: scroll;
padding: 1rem;
}
.content {
background-color: #c9c;
padding: 1rem;
}
.footer {
background: #cec;
height: 5rem;
padding: 1rem;
}
<!-- language: lang-html -->
<main class="main-content">
<p><code>main</code> Grid row height is <code>1fr</code> so it has a variable height that adjusts to take up whatever the remaining height of the grid is after accounting for the other two row heights.</p>
<p>Using <code>overflow-y: scroll</code> on this element also allows it to scroll vertically when needed to fit its contents</p>
</main>
<aside class="content">
<p><code>aside</code> Grid row height is auto so it has a variable height that adjusts to the size of its content.</p>
</aside>
<footer class="footer">
<p><code>footer</code> Grid row height is max-content. The footer has fixed height and always "sticks" to the bottom of the viewport.</p>
</footer>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论