首页css 将页面分成上下两部分

css 将页面分成上下两部分

时间: 2024-01-04 19:06:17 浏览: 312

你可以使用 CSS 的 flexbox 布局将页面分成上下两部分。具体来说，你可以创建一个父容器，然后将其设置为 flexbox 布局，并将其 flex-direction 属性设置为 column，这将使其子元素垂直排列。然后，在父容器中添加两个子元素，一个位于顶部，另一个位于底部。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>上下分栏页面</title> <style> .container { display: flex; flex-direction: column; height: 100vh; } .top { flex: 1; background-color: #f2f2f2; padding: 20px; } .bottom { flex: 1; background-color: #ccc; padding: 20px; } </style> </head> <body> <div class="container"> <div class="top"> <h2>上部分</h2> <p>这里是上部分内容。</p> </div> <div class="bottom"> <h2>下部分</h2> <p>这里是下部分内容。</p> </div> </div> </body> </html> ``` 在上面的示例代码中，我们使用了 flexbox 布局将页面分成上下两部分。我们设置了容器的高度为 100vh，这将使容器的高度与视口的高度相等。然后，我们将顶部和底部的子元素的 flex 属性设置为 1，这将使它们平均分配容器中的可用空间。你可以根据需要调整容器和子元素的样式。

阅读全文