css代碼如下：

<style>* {margin: 0;padding: 0;}.top {width: 100%;height: 40px;background-color: #2fa8ec;font-size: 20px;line-height: 25px;}.middle {position: absolute;top: 0px;bottom: 40px;width: 100%;/*background-color: yellow;*/font-size: 35px;/*text-align: center;*/}.bottom {position: absolute;bottom: 0;width: 100%;height: 40px;line-height: 40px; /*行高與高度相等，內容垂直居中*//*background-color: chartreuse;*/text-align: center;} </style>

應用代碼如下：

<template> <div><div class="middle"><div class="ui container"><div class="ui stackable grid"><div class="six wide column"><xxxxxxxx></xxxxxxxx></div><div class="six wide column"><xxxxxxxx></xxxxxxxx></div><div class="four wide column"><xxxxxxxx></xxxxxxxx></div></div></div></div><div class="bottom"><MainFunctionTool></MainFunctionTool></div> </div> </template>

運行截圖如下：

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的前端笔记-CSS布局使得网页分成3部（头，内容，脚）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。