HTML中表格的页眉页脚布局解决方案

富&＃xff0c;你需要做的是得到一个良好的基础在尝试这个之前在HTML和CSS中。理想情况下&＃xff0c;您希望避免内联样式(例如style&＃61;"border: 1px solid black;")。你不需要固定或绝对定位来实现这一点。基本的HTML/CSS技术是完全可行的。这里是一个替代的解决方案&＃xff0c;以你的要求&＃xff1a;

而CSS&＃xff1a;

/* 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。采取这个演示&＃xff0c;并从中吸取教训&＃xff01;希望这可以帮助&＃xff01;