项目中用到table布局，要求header能够向上折叠和展开、footer能够向下折叠和展开，并且content能够自适应浏览器的高度。经过一番测试，实现的代码如下所示：
<!DOCTYPE html>
<html>
<head>
<title>主页</title>
<style type="text/css">
html,body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" style="height:100%; width:100%; table-layout:fixed;">
<tr>
<td id="header" style="height:77px;background:blue;">
</td>
</tr>
<tr>
<td style="height:12px;;background:yellow;" onclick="document.getElementById('header').style.display==''?document.getElementById('header').style.display='none':document.getElementById('header').style.display=''">
</td>
</tr>
<tr>
<td id="content" style="background:red;vertical-align:top;height:auto;">
</td>
</tr>
<tr>
<td style="height:12px;;background:yellow;" onclick="document.getElementById('footer').style.display==''?document.getElementById('footer').style.display='none':document.getElementById('footer').style.display=''">
</td>
</tr>
<tr>
<td id="footer" style="height:139px;background:blue;">
</td>
</tr>
</table>
</body>
</html>
注意：有一点body的css描述中必须有margin:0px; padding:0px;否者的话，有可能导致content的高度不能自适应。
项目中用到div布局，要求三行单列，上下固定高度，中间自适应，中间内容过多时，出现滚动条。经过一番测试，实现的代码如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
html,body {width:100%;height:100%;}
* {margin:0;padding:0;}
div {width:100%;}
</style>
</HEAD>
<BODY>
<div style="height:20%;background:red;"></div>
<div style="height:70%;overflow-y:auto;background:#eee">
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />dadadada<br />
dadadada<br />
dadadada<br />dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
dadadada<br />
</div>
<div style="height:10%;background:green"></div>
</BODY>
</HTML>
项目中用到div布局，要求header能够向上折叠和展开、footer能够向下折叠和展开，并且content能够自适应浏览器的高度。最终采用css+js方式实现，能够兼容firefox和ie,对于非ie内核浏览器，通过设定display:table、display:table-row和display:table-cell来模拟表格的表现形式,对于ie通过js控制content的高度来实现，经过一番测试，实现的代码如下所示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<style>
html,body{
margin:0px;
height:100%;
}
#wrapper{
width:100%;
height:100%;
MARGIN: 0px auto;
display:table;
}
#wrapper > div {
display:table-row;
}
#header{
width:100%;
height:77px;
background-color:blue;
}
#content{
width:100%;
height:expression(document.body.clientHeight-240 + "px");
background-color:red;
}
#footer{
width:100%;
height:139px;
background-color:blue;
}
</style>
<script>
function setHeight(obj,hei){
var objHeight = document.getElementById('content').style.height;
objHeight = objHeight.substr(0,objHeight.length-2);
objHeight = parseInt(objHeight);
if(obj.style.display==''){
document.getElementById('content').style.height =objHeight+hei+"px";
}else{
document.getElementById('content').style.height =objHeight-hei+"px";
}
}
</script>
<body>
<div id="wrapper">
<div id="header">header</div>
<div style="height:12px;;background:yellow;" onclick="setHeight(document.getElementById('header'),77);document.getElementById('header').style.display==''?document.getElementById('header').style.display='none':document.getElementById('header').style.display='';"> </div>
<div id="content">content</div>
<div style="height:12px;;background:yellow;" onclick="setHeight(document.getElementById('footer'),139);document.getElementById('footer').style.display==''?document.getElementById('footer').style.display='none':document.getElementById('footer').style.display='';"> </div>
<div id="footer">footer</div>
</div>
</body>
</html>
div居中显示：
div{
text-aligin:center;
}
table居中显示：
table{
margin:auto;
}
相关推荐
"自适应表格"是指那些能够根据用户设备的屏幕尺寸和方向自动调整布局和展示方式的表格，确保在PC、手机和平板等不同设备上都能提供清晰、易读的用户体验。 标题"自适应表格，适用于PC，手机同一页面"揭示了这个设计...
《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要： 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计...
### BFC概念详解 ...通过合理利用BFC，可以有效地解决布局中常见的问题，比如防止margin折叠、清除内部浮动以及实现自适应多栏布局等。希望本文能够帮助大家更好地理解和应用BFC，提高前端开发效率和质量。
3. **关闭详情页后自适应**：当打开详细信息后再次关闭，表格高度能够自动适应，保持良好的布局。 4. **横向滚动处理**：对于数据过多的情况，本实例提供了横向滚动的解决方案，确保内容完整展示。 **实现步骤** ...
2. 接着，我们需要获取这个父级 `div` 下的两个子元素：`layui-table-main` 和 `layui-form`。`layui-table-main` 是 Layui 表格的主要内容区域，而 `layui-form` 通常包含表格的分页部分。我们可以使用 `...
9.7 高度自适应 215 9.8 小结 216 第4篇 实战演习 第10章 div+CSS打造Blog版面 218 10.1 页面布局和规划 219 10.1.1 页面设计 220 10.1.2 文档目录和模版设计 221 10.2 首页设计 222 10.2.1 首页框架设计 222 10.2.2...
导航栏内部包含一个`<div class="container-fluid">`，用于保持内容在不同屏幕尺寸下的响应式布局。`navbar-header`包含了可折叠的按钮和品牌链接，`navbar-collapse`则用于在小屏幕上折叠导航链接。 在CSS部分，...
### 前端面试题详解 ... **01、Doctype作用？严格模式与混杂模式如何区分？...**29、元素竖向的百分比设定是相对于容器的高度吗？** - 是的，百分比高度通常是相对于最近的具有百分比值的祖先元素的高度。 **30、...
jQuery折叠菜单，自适应浏览器高度 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title> NarBar table ; charset=gb2312" ...
BFC的应用场景广泛，比如清除浮动、解决外边距折叠问题、创建自适应两栏布局等。熟练掌握BFC原理能帮助开发者更好地控制页面元素的布局，提高页面设计的灵活性和可维护性。在实际开发中，合理利用BFC特性可以避免很...
通过调整行（row）和列（col）的类，可以轻松实现内容在不同屏幕尺寸下的自适应排列。例如，你可以定义一个在桌面视图上占据3列而在手机视图上占据全宽的元素。 在HTML方面，Bootstrap 4对HTML5元素的支持更加完善...
当需要让元素高度自适应时，可以使用如下CSS代码来处理高度问题： ```css div { height: auto !important; height: 200px; min-height: 200px; } ``` 这种方法可以确保元素在内容超出时不会出现高度塌陷的问题，...
树形结构组件用于展示层次化数据，支持节点的展开、折叠、选中等操作，常用于目录结构、组织结构等场景。 #### 5. 菜单（menu） 菜单组件用于创建多级下拉菜单，提供了一种方便的导航方式，支持动态加载和异步更新...
8. **语义化**：HTML5更加强调语义化，例如`<article>`表示独立的内容块，`<aside>`为侧边栏，`<details>`和`<summary>`用于折叠展开的详情。 9. **交互性增强**：`<progress>`和`<meter>`元素用于进度条，`...
表格由`<table>`, `<tr>`（行），`<th>`（表头）和`<td>`（单元格）组成。例如： ```html <table> 姓名 年龄 大卫 <td>30 尼古拉斯 <td>25 </table> ``` 这个表格有两个列：姓名和年龄，以及两...