div 布局

豌豆干 2009-03-10 04:00:29
在<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
模式下

希望上下两部分用两个div布局，上面div(id="div1")固定高度,宽度100%(style="width:100%;height:50px")，下面的div(id="div2")占除掉div1之后的所有空间（在Table模式下设为height=100%,width=100%）,要求div2能在超过高度时出现滚动条（只是div2，不是整个浏览器的滚动条）。
搞了多天了。搞不定。
哪位达人帮帮忙。先谢过！
...全文
339 22 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
22 条回复
切换为时间正序
请发表友善的回复…
发表回复
maxradish 2011-04-11
  • 打赏
  • 举报
 回复
<div style="background-color:Yellow; width:900px;height:800px display:inline;" id="body">
<div id="divHead" style="background-color:back; width:890px; height:200px">
divHead
</div>
<div id="div_mid">
<div id="div_mid_left" style="background-color:red; width:150px;

display:inline;height:590px" >
div_mid_left
</div>
<div id="div_mid_right" style="background-color:blue; width:740px;

display:inline;height:590px" >
<div id="div_mid_right_top" style="background-color:Aqua; width:730px;

display:inline;height:100px">div_mid_right_top</div>
<div id="div_mid_right_flash" style="background-color:yellow; width:740px;

display:inline;height:250px">div_mid_right_flash</div>
<div id="div_mid_right_mid" style="background-color:black; width:740px;

display:inline;height:250px">div_mid_right_flash</div>
<div id="div_mid_right_down" style="background-color:black; width:740px;

display:inline;height:250px">
<div id="div_mid_right_down_left" style="background-color:red;

display:inline;width:740px; height:250px">
div_mid_right_down_left
</div>
<div id="div_mid_right_down_right" style="background-color:red;

display:inline;width:740px; height:250px">

</div>
</div>
</div>
</div>


</div>
豌豆干 2009-03-10
  • 打赏
  • 举报
 回复
ojlovecd
谢了。问题解决了！
a12321321321312321 2009-03-10
  • 打赏
  • 举报
 回复
顶下~
Rotel-刘志东 2009-03-10
  • 打赏
  • 举报
 回复
大型网站布局方法css+div比较流行的。
wadehou 2009-03-10
  • 打赏
  • 举报
 回复
Iframe 以及 把table放到div2 中都可以！
悔说话的哑巴 2009-03-10
  • 打赏
  • 举报
 回复
用个iframe搞定！
zyang198811 2009-03-10
  • 打赏
  • 举报
 回复
对，iframe可以实现
hangang7403 2009-03-10
  • 打赏
  • 举报
 回复
up
hx_huang 2009-03-10
  • 打赏
  • 举报
 回复
何必这么麻烦吗！
用个iframe搞定！
jfd198512 2009-03-10
  • 打赏
  • 举报
 回复
顶！LZ
大神来了丶 2009-03-10
  • 打赏
  • 举报
 回复
up
lee_b 2009-03-10
  • 打赏
  • 举报
 回复
高度在每个浏览也有所不同,像FF,把body设为100%也没用,,我的方法是能过js获取屏幕的分辨率再减去一些固定的像素,,呵呵,,不是很活
金大哈 2009-03-10
  • 打赏
  • 举报
 回复
用框架好
浮生若梦丶 2009-03-10
  • 打赏
  • 举报
 回复
使用js控制或者直接用框架
koukoujiayi 2009-03-10
  • 打赏
  • 举报
 回复
这个题好象无解哦!!
div2是不能用百分比的,要动态确定一个值,这个值就是浏栏器的高度-50px-工具条高度-菜单高度等等!
楼主能获得当前浏栏器的高度吗???
我姓区不姓区 2009-03-10
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 zzxap 的回复:]
四楼的都采用绝对定位了，怎么自适应？
[/Quote]
试试便知
zzxap 2009-03-10
  • 打赏
  • 举报
 回复
四楼的都采用绝对定位了，怎么自适应？
zzxap 2009-03-10
  • 打赏
  • 举报
 回复
[code=HTML]

<div id="OUT" style=" height:100% ;width:100%;border: blue 2px solid; ">

<div id="A" style=" height:400px; width:98%;float:left; border: black 3px solid;margin:10px">
sdfgsdfg
</div>

<div id="B" style=" height:auto; width:98%;OVERFLOW-y:auto;border:red 1px solid;margin:10px">
sdfgsdfg
sdf
sdv
sdf
</div>

</div>


[/CODE]
我姓区不姓区 2009-03-10
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<HTA:APPLICATION

ID=oHTA

SCROLL="no"/>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title>

<style type="text/css">

* { font:12px Arial;}

html {

   height:100%;

   max-height:100%;

   border:0;

   overflow:hidden;

}



* html {

   padding:50px 0 0 0;

}



body {

   height:100%;

   max-height:100%;

   margin:0;

   overflow:auto;

}



#content {

   position:absolute;

   top:50px;

   bottom:0;

   left:0;

   right:0;

   z-index:3;

   width:100%;

   overflow:auto;

   border:solid #000000 1px;

}



* html #content {

   top:50px;

   bottom:0;

   height:100%;



}



#head {

   position:absolute;

   margin:0;

   top:0;

   left:0;

   width:100%;

   height:50px;

   z-index:5;

   border:solid #000000 1px;

}



</style>

</head>

<body>

<div id="head">

sdf

</div>

<div id="content" >

<p> </p>

<p> 1</p>

<p> 2</p>

<p> 3</p>

<p>4 </p>

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

很多回车<br />

</div>

</body>

</html>
流枫Maple 2009-03-10
  • 打赏
  • 举报
 回复
Table里套DIV试试吧
加载更多回复（2）
div+css布局大全
9. **性能优化**：合理的div+css布局也应考虑性能，如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等，以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**：尽管现代浏览器对CSS的支持...
四个完整的DIV+CSS网页案例，有详细解说
每个案例都提供了详细的解说，旨在帮助学习者理解如何通过DIV布局和CSS样式来构建网页。DIV是HTML中的一个通用容器元素，常用于组织页面结构，而CSS则是用于定义这些元素外观和布局的关键技术。 【描述】：“四个...
div+css 网站布局案例精粹 Sample
《div+css 网站布局案例精粹》是一本专注于使用HTML的div元素和CSS进行网站布局设计的专业教程。这个Sample压缩包包含了该书的部分实例，旨在帮助读者深入理解和掌握这一核心技术。div元素作为HTML中的一个区块容器...
h5的div布局详解
那么在使用div布局之前就要了解div的属性 div是块级元素 块级元素在页面中的独占一行 默认情况下的高度由里面的内容决定。由于块级元素独占一整行 那么使用div进行布局的话 div和div之间是上下排列的 还有块级元素...
CSS和div布局页面
CSS和div布局页面 CSS和div布局页面一、什么是布局网页布局页面元素定位机制二、布局属性浮动清除浮动定位绝对定位相对定位固定定位 一、什么是布局 网页实质是块与块之间的位置，块挨着块，块嵌套块，块叠着块。...
.NET社区

62,243

社区成员

668,998

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

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

+ 用AI写文章