CSS 设置元素位于底部|极客教程

CSS 设置元素位于底部

在网页设计中，有时候我们需要将某个元素固定在页面的底部，比如页脚、导航栏等。本文将介绍如何使用CSS来设置元素位于页面底部，并提供一些示例代码供参考。

1. 使用绝对定位

一种常见的方法是使用绝对定位来将元素固定在页面底部。我们可以通过设置position: absolute和bottom: 0来实现这一效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bottom Element</title>
<style>
    .bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 10px 0;
    }
</style>
</head>
<body>
    <div class="content">
        <h1>Welcome to Geek-docs.com</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="bottom">
        © 2021 Geek-docs.com
    </div>
</body>
</html>

Output:

CSS 设置元素位于底部

在上面的示例中，我们创建了一个.bottom类，通过设置position: absolute和bottom: 0，将底部元素固定在页面底部。你可以根据需要调整样式。

2. 使用Flex布局

另一种常见的方法是使用Flex布局来实现元素位于底部。我们可以通过设置display: flex和justify-content: flex-end来实现这一效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bottom Element</title>
<style>
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    .content {
        flex: 1;
    }
    .bottom {
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 10px 0;
    }
</style>
</head>
<body>
    <div class="content">
        <h1>Welcome to Geek-docs.com</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="bottom">
        © 2021 Geek-docs.com
    </div>
</body>
</html>

Output:

CSS 设置元素位于底部

在上面的示例中，我们通过设置display: flex和flex-direction: column，将页面分为上下两部分，然后通过设置.content的flex: 1，使其占据剩余空间，最后通过设置.bottom的样式，将底部元素固定在页面底部。

3. 使用Grid布局

除了Flex布局，我们还可以使用Grid布局来实现元素位于底部。我们可以通过设置display: grid和grid-template-rows: auto 1fr来实现这一效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bottom Element</title>
<style>
    body {
        display: grid;
        grid-template-rows: auto 1fr;
        min-height: 100vh;
    }
    .content {
        background-color: #f9f9f9;
        padding: 20px;
    }
    .bottom {
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 10px 0;
    }
</style>
</head>
<body>
    <div class="content">
        <h1>Welcome to Geek-docs.com</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="bottom">
        © 2021 Geek-docs.com
    </div>
</body>
</html>

Output:

CSS 设置元素位于底部

在上面的示例中，我们通过设置display: grid和grid-template-rows: auto 1fr，将页面分为上下两部分，然后通过设置.content和.bottom的样式，将底部元素固定在页面底部。

4. 使用Sticky定位

另一种常见的方法是使用Sticky定位来实现元素位于底部。我们可以通过设置position: sticky和bottom: 0来实现这一效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bottom Element</title>
<style>
    .bottom {
        position: sticky;
        bottom: 0;
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 10px 0;
    }
</style>
</head>
<body>
    <div class="content">
        <h1>Welcome to Geek-docs.com</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="bottom">
        © 2021 Geek-docs.com
    </div>
</body>
</html>

Output:

CSS 设置元素位于底部