以下是一个简单的 CSS div 布局实例代码。这个例子包括一个基本的页头、主体内容和页脚部分。当然，这只是一个简单的示例，你可以根据需要调整和增加复杂性。
HTML 代码：
```html
```
对应的 CSS 代码（styles.css）：
```css
body {
display: flex;
flex-direction: column;
height: 100vh; /* 设置整个页面的高度为视口的 100% */
margin: 0; /* 移除默认的边距 */
}
#header {
background-color: #f8f9fa; /* 页头的背景颜色 */
height: 100px; /* 页头的高度 */
padding: 20px; /* 页头的内边距 */
}
#main {
background-color: #fff; /* 主体内容的背景颜色 */
flex-grow: 1; /* 让主体内容占据剩余的空间 */
padding: 20px; /* 主体内容的内边距 */
}
#footer {
background-color: #333; /* 页脚的颜色 */
color: #fff; /* 页脚文字的颜色 */
height: 50px; /* 页脚的高度 */
padding: 20px; /* 页脚的内边距 */
position: fixed; /* 将页脚固定在页面底部 */
bottom: 0; /* 页脚距离页面底部为 0 */
}
```
在这个例子中，我们使用了 Flexbox（弹性盒子模型）来布局页面。Flexbox 是一个用于创建复杂布局的 CSS 模块，它允许你设计复杂的布局结构，并且很容易对齐元素。在这个例子中，主体内容部分使用了 `flex-grow: 1` 属性，使其占据剩余的空间。页脚部分使用了 `position: fixed` 属性，使其固定在页面底部。