table布局如何改为div布局?

网络科技 2009-09-02 10:46:15
代码如下:


<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd"> 

<html>

  <head>

  </head>  

  <body style="margin: 0px;padding: 0px;overflow: hidden;">   

    <table width="100%" height="100%" align="center" cellspacing="0" cellpadding="0" border="0">

      <tbody>

      <tr>

        <td width="100%" height="100" id="top">

           这是顶部

        </td>

      </tr>

      

      <tr>

        <td width="100%" height="40" id="center">

         这是中部

        </td>

      </tr>

      

      <tr>

        <td width="100%" height="100%" id="bottom">

        这是底部

        </td>

      </tr>

      </tbody>

    </table>    

  </body>

</html>

这个布局简单,就是上部中中部高度固定,下部可自动变化,即高度为html高度减去上部与中部.
以上代码用表格布局,没问题的,现在想改为div布,弄了半点,还是没达到表格布局的效果,很奇怪,我的div布局如下:


<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd"> 

<html>

  <head>    

    <style type="text/css"> 

    html{

    	height: 100%;

    }    

	

	.top { 

		position: absolute;top: 0px;right: 0px;left: 0px;height: 100px;width: 100%;overflow: hidden; 

	} 

	.center { 

		position: absolute;top: 100px;right: 0px;left: 0px;height: 40px;width: 100%; overflow: hidden;

	} 

	.bottom { 

		position: absolute;top: 140px;right: 0px;bottom: 0px;left: 0px;height: 100%;width: 100%;overflow: auto;

	}   

    </style>

  </head>

  

  <body style="margin: 0px;padding: 0px;overflow: hidden;">

    <div class="top">

      这是顶部

    </div>

    

    <div class="center">

      这是中部

    </div>

    

    <div class="bottom">

      这是底部

    </div>  

  </body>

</html>

感觉这应该没问题,可实际这两种效果是不一样的,可以改变高度就知道区别了,或用工具很容易看出来它们的区别.
水平有限,真的不好看出来那里出问题了,请各位大虾指教.多谢!
...全文
603 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
网络科技 2009-09-04
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 egeg3000 的回复:]
高度100%不要轻易用，非常诡异。。。如果非要做这种上中下布局，建议上层和下层用，中间层自适应不设定高度，不过话说有网站是上中下布局吗？左中右布局比较常用吧。。。左中右的话在中间层设置float：left；的话就可以实现灵活变动了，需要的话我给你发左中右布局的代码。
[/Quote]
左中右代码对我不适用,不过还是很感谢你.
高度100%确实很诡异,很难办,写死了也不行.特别在iframe中,100%高度也很诡异,搞得很多人只好用js来控制了.看来也没什么更好的办法了,估计是它们的bug吧,希望以后能改进,不过,还是很感谢各位的参与,就此结了吧.
sinopf 2009-09-03
  • 打赏
  • 举报
 回复
重新设计页面吧，修改也够麻烦的了
mykelly6 2009-09-03
  • 打赏
  • 举报
 回复
div的高度指定还是用js算出来以后，给底部的div指定css吧
weqp 2009-09-03
  • 打赏
  • 举报
 回复
顶啊
zhoudengya 2009-09-03
  • 打赏
  • 举报
 回复
13楼说的不错，用作中有容易掌控
easetech 2009-09-03
  • 打赏
  • 举报
 回复
建议还是不要用 absolute
就像12楼说的 上中下布局 不灵活
还是左中右的好
egeg3000 2009-09-03
  • 打赏
  • 举报
 回复
高度100%不要轻易用，非常诡异。。。如果非要做这种上中下布局，建议上层和下层用，中间层自适应不设定高度，不过话说有网站是上中下布局吗？左中右布局比较常用吧。。。左中右的话在中间层设置float：left；的话就可以实现灵活变动了，需要的话我给你发左中右布局的代码。
网络科技 2009-09-02
  • 打赏
  • 举报
 回复
没什么人看啊,自已顶下.
感觉问题出在div的height: 100%上,对于表格来说,它的100%并非是整个表格的高度,
而是高度减去其它行的高度,而div似乎就是整个的html高度了,所以造成这两个100%不相一致
的情况,这样,自然整个布局就不一样了,不知道是不是这个原因呢?
cppwizard_alvin 2009-09-02
  • 打赏
  • 举报
 回复
div+css还是比较麻烦的，
要考虑浏览器hack，光IE 6,7,8三个版本的css就写的烦死了
网络科技 2009-09-02
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 flyerwing 的回复:]
CSS code
html,body{
margin:0px;
padding:0px;
text-align:center;
width:1024px;}
#top{
postion:absolute;
top:0px;
height:200px;
width:100%;}
#bottom{
postion:absolute;
bottom:0px;
height:200px;
width:100%;}
#middle{
width:100%;
height:100%;
background-color:red;}
HTML code<html><head>示例</head><body><divid="top">顶部</div><divid="middle">中部</div><divid="">底部</div></body></html>
[/Quote]
不好意思,前面没说清楚,其实我每个部分中放的是iframe,如:
<div class="bottom"><iframe src="bottom.jsp" id="bottom" width="100%" height="100%" frameborder="no" scrolling="auto" border="0" marginwidth="0" marginheight="0"></iframe></div>
由于上部与中部放的iframe都有指定高度,故正常,而底部的由于div高度是可变的,所以也用了100%,这样造成的后果是底部的iframe不能自适应div的高度,当出现滚动条时,滚动条的"底端"就看不清了.(说得有点抽象,这样说吧,相当于上下滚动条的下半部分被遮住了,这样难看是显然的),不知道有类似用法的大吓们是如何处理的呢?(我目前是用表格且文档类型为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">才能正常)
flyerwing 2009-09-02
  • 打赏
  • 举报
 回复 


html,body

{

margin:0px;

padding:0px;

text-align:center;

width:1024px;

}

#top

{

postion:absolute;

top:0px;

height:200px;

width:100%;

}

#bottom

{

postion:absolute;

bottom:0px;

height:200px;

width:100%;

}

#middle

{

width:100%;

height:100%;

background-color:red;

}





<html>

<head>示例</head>

<body>

<div id="top">顶部</div>

<div id="middle">中部</div>

<div id="">底部</div>

</body>

</html>
网络科技 2009-09-02
  • 打赏
  • 举报
 回复
查了下资料,如这个(http://bbs.51js.com/archiver/tid-77243.html),基本上明白了原因,这是无法自适应高度的问题,跟文档类型有关系的,不好弄的.只能使用旧的文档类型定义来解决的了.
网络科技 2009-09-02
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 xinyung 的回复:]
引用 2 楼 xzy88 的回复:
没什么人看啊,自已顶下.
感觉问题出在div的height: 100%上,对于表格来说,它的100%并非是整个表格的高度,
而是高度减去其它行的高度,而div似乎就是整个的html高度了,所以造成这两个100%不相一致
的情况,这样,自然整个布局就不一样了,不知道是不是这个原因呢?

是这样，不过可以这样设置：
HTML code<html><head><styletype="text/css">
html{
height: 100%;}

.content{
height:100%; width:100%; overflow: hidden;}

.top{
height:100px; width:100%; overflow: hidden;}
.center{
height:40px; width:100%; overflow: hidden;}
.bottom{
height:100%; width:100%; overflow:hidden;}</style></head><body><divclass="content"><divclass="top">
这是顶部</div><divclass="center">
这是中部</div><divclass="bottom">
这是底部</div></div></body></html>
[/Quote]
外面套一个div的方法之前也试过,好像也没什么效果,100%并非是剩余的全部高度,还是会解析会整个的body高度,很麻烦,难道用div真的很麻烦吗?估计要配合js实现了.
红街咖啡 2009-09-02
  • 打赏
  • 举报
 回复
帮你顶。嘿嘿
xinyung 2009-09-02
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 xzy88 的回复:]
没什么人看啊,自已顶下.
感觉问题出在div的height: 100%上,对于表格来说,它的100%并非是整个表格的高度,
而是高度减去其它行的高度,而div似乎就是整个的html高度了,所以造成这两个100%不相一致
的情况,这样,自然整个布局就不一样了,不知道是不是这个原因呢?
[/Quote]
是这样，不过可以这样设置：
<html>

  <head>    

    <style type="text/css"> 

    html{

        height: 100%;

    }

    

    .content { 

       height:100%; width:100%; overflow: hidden; 

    } 

    

    .top { 

       height:100px; width:100%; overflow: hidden; 

    } 

    .center { 

        height:40px; width:100%; overflow: hidden;

    } 

    .bottom { 

        height:100%; width:100%; overflow:hidden;

    }   

    </style>

  </head>

  

  <body>

  	<div class="content">

	    <div class="top">

	      这是顶部

	    </div>

	    

	    <div class="center">

	      这是中部

	    </div>

	    

	    <div class="bottom">

	      这是底部

	    </div>

	  </div>

  </body>

</html>
javagxc 2009-09-02
  • 打赏
  • 举报
 回复
建议你用table,div+css太麻烦了.
【web前端】bootstrap自适应定制，拖拽布局，一键生成页面
这里将介绍整个guiplan开发工具的使用以及前端布局的基础教程。 常用的基本操作，如div操作，文字操作，图片操作，组件操作，生成html网页，保存html，css代码。通过拖拽，点击，快捷键等方式轻松绘制想要的静态页面...
php table布局,DIV和table页面布局的区别和联系
本文向大家描述一下DIV和Table页面布局的区别和联系，一般来说Table开发快，容易控制，浏览器兼容也好些，至于DIV的优势请看下文详解。DIV和Table页面布局的区别和联系现在对于网页制作是选择传统的Table还是用新型的DIV，有分歧。一部分说还是用Table好，开发快，容易控制，浏览器兼容也好些;另一部分认为DIV好，以后的发展趋势,主要是如下原因：DIV+CSS布局比Table布局节...
div+css布局与table布局比较
div+css布局与table布局比较 一、背景介绍 table布局是网页早期布局实现的主要手段，当时的网页构成，相对也比较简单，多是以文本 以及静态图片等组成的，类似于报纸的形式，分区分块显示，table标签的结构表现恰好可以 满足这样的要求。但是随着网页要求的提高和技术的不断探索更迭，尤其是W3C（万维网联 盟）及其他标准组织制定的标准出台后，明确了table标签不是布局工具，使table标签...
学习笔记 HTML5--table布局与div+css布局
本文是和大家交流一下DIV布局和Table布局的比较，DIV可以理解成一个块，是一个比table表格简单的元素，从语法上只有&lt;div&gt;&lt;/div&gt;这样简单的定义。DIV布局和Table布局的区别传统Table布局方式实际上是利用了HTMLTable表格元素具有的无边框特性，由于Table元素可以在显示时使得单元格的边框和间距为0，即不显示边框，因此可以将网页中的各个元素按版...
为什么网页布局用DIV CSS 不用 Table 表格
DIV CSS VS TABLE 网页布局DIV CSS 不用 Table 表格 到现在这已不是个问题了，可还是有很多公司给别人做网站的时候使用TABLE表格， 这种过时的布局，所以有 必要说一说。 请看下面这些问题 0.Table布局页面会带来哪些问题 1.Table布局为什么是不明智？ 2.DIV CSS页面布局 为什么这么火爆
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章