案例一：
為了撐開<body>元素，需要在HTML文件中添加<div>元素。可以將<div>元素放置在<body>元素的開頭或結尾，并設置它的寬度和高度值。以下是一個示例代碼：
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
<br>
div {
width: 100%;
height: 100%;
background-color: lightblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>在上面的代碼中，<div>元素的寬度和高度被設置為100%來撐開整個<body>元素。同時，通過設置背景顏色為lightblue，可以清楚地看到<div>元素撐開了整個<body>元素。需要注意的是，在這個例子中，我們同時將<body>的margin和padding設置為0，以確保<body>元素和<div>元素之間沒有多余的空白。
案例二：
另一種方法是通過使用CSS的position屬性來撐開<body>元素。以下是一個示例代碼：
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
position: relative;
}
<br>
div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: lightblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>在上面的代碼中，我們將<body>元素的position屬性設置為relative，這樣可以使<div>元素相對于<body>元素進行定位。然后，通過將<div>元素的position屬性設置為absolute，并使用top、left、bottom和right屬性將其定位于<body>元素的四個邊緣，從而撐開了<body>元素。通過添加背景顏色，可以更直觀地看到這個效果。
案例三：
還有一種方法是使用CSS的flexbox布局來撐開<body>元素。以下是一個示例代碼：
<html>
<head>
<style>
body {
display: flex;
margin: 0;
padding: 0;
}
<br>
div {
flex: 1;
background-color: lightblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>在上面的代碼中，我們將<body>元素的display屬性設置為flex，這樣可以使用flexbox布局來控制元素的排列。然后，將<div>元素的flex屬性設置為1，這樣它將會自動占據剩余的空間，從而撐開了<body>元素。通過添加背景顏色，可以清楚地看到這個效果。
：
在HTML中使用<div>元素可以輕松地撐開<body>元素，使其填充整個頁面。通過設置<div>元素的寬度和高度，以及使用CSS的position屬性或flexbox布局，可以實現這個效果。根據具體的需求，選擇不同的方法來撐開<body>元素，以達到最佳的視覺效果。