富，你需要做的是得到一个良好的基础在尝试这个之前在HTML和CSS中。理想情况下，您希望避免内联样式(例如style="border: 1px solid black;")。你不需要固定或绝对定位来实现这一点。基本的HTML/CSS技术是完全可行的。这里是一个替代的解决方案，以你的要求：
而CSS：
/* Temp styles */
.header, .sidebar, .content, .footer { border: 5px solid black; }
.content, .sidebar, .footer { border-top: none; }
.sidebar.right { border-right: none; }
.sidebar.left { border-left: none; }
/* Core styles */
.header {
position: relative; /* needed for stacking */
height: 100px;
width: 100%;
}
.content {
position: relative; /* needed for stacking */
width: 100%;
height: 500px;
}
.sidebar {
position: relative; /* needed for stacking */
width: 20%;
height: 100%;
border-top: none;
}
.sidebar.left { float: left; }
.sidebar.left:after,
.sidebar.right:after {
clear: both;
content: "\0020";
display: block;
overflow: hidden;
}
.sidebar.right { float: right; }
.footer {
position: relative; /* needed for stacking */
width: 100%;
height: 100px;
}
这里是一个demo。采取这个演示，并从中吸取教训！希望这可以帮助！
