如何使用HTML和CSS实现底部固定，内容区域滚动的布局？

翻滚的胖子
2023-07-25 15:04:56
前端技术
CSS JavaScript

在网页开发中，实现底部固定，内容区域滚动的布局是一项常见的任务。本文将带你逐步学习如何使用HTML和CSS实现这一布局。

1. HTML结构

首先，我们需要创建网页的基本结构。以下是一个简单的HTML代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>底部固定，内容区域滚动布局</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h2>网页标题</h2>
    </header>
    <main>
        <div class="content">
            <p>网页内容</p>
        </div>
    </main>
    <footer>
        <p>底部内容</p>
    </footer>
</body>
</html>

2. CSS样式

接下来，我们需要为网页添加CSS样式。以下是一个示例的CSS代码：

body {
    margin: 0;
    padding: 0;
}

header {
    background-color: #f0f0f0;
    padding: 20px;
}

main {
    height: calc(100vh - 120px); /* 120px为header和footer的高度之和 */
    overflow-y: scroll;
    padding: 20px;
}

.content {
    margin-bottom: 100px; /* 100px为footer的高度 */
}

footer {
    position: fixed;
    bottom: 0;
    background-color: #f0f0f0;
    padding: 20px;
    width: 100%;
}