在CSS中，我們可以使用多種方法來完成“剩余的部門填完”的任務(wù)，以下是一些常見的解決方案：
1、使用Flexbox：
Flexbox是一種CSS布局模式，它允許你輕松地對元素進(jìn)行靈活的布局，通過使用flex-grow屬性，你可以讓元素在剩余空間中增長，從而填充整個容器。
```css
.container {
display: flex;
}
.department {
flex-grow: 1;
}
```
2、使用CSS Grid：
CSS Grid是一種強(qiáng)大的布局系統(tǒng)，它允許你創(chuàng)建復(fù)雜的網(wǎng)格結(jié)構(gòu)，通過設(shè)定grid-template-columns和grid-template-rows，你可以***地控制每個元素的位置和大小。
```css
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
```
3、使用百分比寬度：
通過設(shè)定元素的寬度為百分比，你可以讓元素根據(jù)容器的大小自動調(diào)整，這種方法適用于簡單的布局，但在復(fù)雜的情況下可能不適用。
```css
.department {
width: 33.33%;
}
```
4、使用JavaScript：
在某些情況下，你可能需要使用JavaScript來動態(tài)計算并設(shè)置元素的寬度或位置，這通常發(fā)生在布局需求非常復(fù)雜且難以通過純CSS實現(xiàn)的情況下。
```javascript
var departments = document.getElementsByClassName('department');
var totalWidth = departments[0].parentNode.offsetWidth;
var singleDepartmentWidth = totalWidth / departments.length;
for (var i = 0; i < departments.length; i++) {
departments[i].style.width = singleDepartmentWidth + 'px';
}
```
在選擇解決方案時，請根據(jù)你的具體需求和布局復(fù)雜性來決定，F(xiàn)lexbox和CSS Grid是處理這類問題的***佳工具，在某些情況下，JavaScript可能是必要的，特別是當(dāng)布局需求非常特定且復(fù)雜時。
