css上下两栏全屏布局

发表于前端技术学习版块 css,教程

CSS上下两栏全屏布局是一种经典的网页布局，适用于各种网站。下面我们来介绍一下如何实现这种布局。首先，我们需要在HTML中添加两个标签，一个用于放置上方的内容，一个用于放置下方的内容。代码如下：&am

CSS上下两栏全屏布局是一种经典的网页布局，适用于各种网站。下面我们来介绍一下如何实现这种布局。

首先，我们需要在HTML中添加两个标签，一个用于放置上方的内容，一个用于放置下方的内容。代码如下：

<div class="top">
  <p>这里是上方的内容</p>
</div>

<div class="bottom">
  <p>这里是下方的内容</p>
</div>

接下来，我们需要在CSS中设置上下两个标签的样式。首先，设置整个页面的高度为100%：

html, body {
  height: 100%;
}

然后，设置上下两个标签的高度为50%，使它们占据整个页面：

.top, .bottom {
  height: 50%;
}

接着，为了让上下两个标签分别位于页面的上下部分，我们需要设置它们的position属性为absolute，并分别设置它们的top和bottom值为0：

.top {
  position: absolute;
  top: 0;
}

.bottom {
  position: absolute;
  bottom: 0;
}

最后，为了让两个标签之间没有空隙，我们需要设置它们的margin为0：

.top, .bottom {
  margin: 0;
}

现在，我们已经成功实现了CSS上下两栏全屏布局。完整的代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>CSS上下两栏全屏布局</title>
  <style>
    html, body {
      height: 100%;
    }
    .top, .bottom {
      height: 50%;
      margin: 0;
    }
    .top {
      position: absolute;
      top: 0;
    }
    .bottom {
      position: absolute;
      bottom: 0;
    }
  </style>
</head>
<body>
  <div class="top">
    <p>这里是上方的内容</p>
  </div>
  <div class="bottom">
    <p>这里是下方的内容</p>
  </div>
</body>
</html>

上面的代码可以直接复制粘贴到HTML文件中进行尝试，实现了上下两栏全屏布局。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。