一个css布局问题，困惑！！

yenyen_421 2009-01-07 11:33:12
目前我有一个div+css布局，滚动条不能位于底部黑色块之上，而是超出范围了，看下图：


再有一个问题就是在FF下的iframe不能100%

晕呀，好久没解决，望各位大哥救救我！！>_<

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body,html{margin:0;height:100%;overflow:hidden;font-size:12px;}
li,ul{list-style:none;margin:0;padding:0;}
.layout{width:100%;height:100%;}
.layout li{width:100%;}
.layout li.header{height:150px;background-color:#342959;}
.layout li.iframe{height:100%;}
.layout li.footer{height:16px;background-color:#181330;position: absolute; bottom: 0; left: 0;}
</style>
</head>

<body>
<div class="layout">
<ul>
<li class="header"></li>
</ul>
<ul>
<li class="iframe"><iframe src="http://www.163.com" frameborder="0" width="100%" height="100%"></iframe></li>
</ul>
<ul>
<li class="footer"></li>
</ul>
</div>
</body>
</html>
...全文
136 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
yang709610485 2009-01-08
  • 打赏
  • 举报
 回复
.layout li.footer{height:16px;background-color:#181330;position: absolute; bottom: 0; left: 0;}



#181330是什么颜色？会不会是你下面那个色.我这台机器上没装FF..看不到...我不清楚是不是这原因....
arjsyy 2009-01-08
  • 打赏
  • 举报
 回复
帮顶
浮生若梦丶 2009-01-08
  • 打赏
  • 举报
 回复
e
飘零雾雨 2009-01-08
  • 打赏
  • 举报
 回复
参考：http://blog.doyoe.com/article/135.htm
justxd 2009-01-08
  • 打赏
  • 举报
 回复
帮顶
summer0214 2009-01-07
  • 打赏
  • 举报
 回复
4楼的可以
ztlyz84 2009-01-07
  • 打赏
  • 举报
 回复 


<script language="javascript">

    function changeFrameHeight()

    {

        document.getElementById("ConFrame").height = document.body.clientHeight - 166;

    }

</script>

</head> 



<body onload="changeFrameHeight();" onresize="changeFrameHeight();"> 

<div class="layout"> 

<ul> 

<li class="header"> </li> 

</ul> 

<ul> 

<li class="iframe"> <iframe id="ConFrame" src="http://www.163.com" frameborder="0" width="100%" height="100%"> </iframe> </li> 

</ul> 

<ul> 

<li class="footer"> </li> 

</ul> 

</div> 

</body> 

</html>

yenyen_421 2009-01-07
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 summer0214 的回复:]
只要改动一下高的百分度 <iframe src="http://www.163.com" frameborder="0" width="100%" height="80%" scrolling="yes"> </iframe>
[/Quote]

要适应不同的分辨率的，在1280X768下就只剩一大半了
summer0214 2009-01-07
  • 打赏
  • 举报
 回复
只要改动一下高的百分度<iframe src="http://www.163.com" frameborder="0" width="100%" height="80%" scrolling="yes"> </iframe>
summer0214 2009-01-07
  • 打赏
  • 举报
 回复
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档 </title>
<style type="text/css">
body,html{margin:0;height:100%;overflow:hidden;font-size:12px;}
li,ul{list-style:none;margin:0;padding:0;}
.layout{width:100%;height:100%;}
.layout li{width:100%;}
.layout li.header{height:150px;background-color:#342959;}
.layout li.iframe{height:100%;}
.layout li.footer{height:16px;background-color:#181330;position: absolute; bottom: 0; left: 0;}
</style>
</head>

<body>
<div class="layout">
<ul>
<li class="header"> </li>
</ul>
<ul>
<li class="iframe"><iframe src="http://www.163.com" frameborder="0" width="100%" height="80%" scrolling="yes"> </iframe> </li>
</ul>
<ul>
<li class="footer"> </li>
</ul>
</div>
</body>
</html>
yenyen_421 2009-01-07
  • 打赏
  • 举报
 回复
楼上的是等iframe的内容加载完才自适应，能不能直接让li自适应呢，我以前是用table做的，table可以做到自适应的效果。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body,html{margin:0;height:100%;overflow:hidden;font-size:12px;}
.layout{width:100%;height:100%;}
.header{height:150px;background-color:#342959;}
.footer{height:16px;background-color:#181330;}
</style>
</head>

<body>
<table cellspacing="0" cellpadding="0" class="layout">
<tr>
<td class="header"> </td>
</tr>
<tr>
<td><iframe src="http://www.163.com" frameborder="0" width="100%" height="100%"></iframe></td>
</tr>
<tr>
<td class="footer"> </td>
</tr>
</table>
</body>
</html>
艾思软件-app开发公司 2009-01-07
  • 打赏
  • 举报
 回复 


<!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> 

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

<title>无标题文档 </title> 

<style type="text/css"> 

body,html{margin:0;height:100%;overflow:hidden;font-size:12px;} 

li,ul{list-style:none;margin:0;padding:0;} 

.layout{width:100%;height:100%;} 

.layout li{width:100%;} 

.layout li.header{height:150px;background-color:#342959;} 

.layout li.iframe{height:100%;} 

.layout li.footer{height:16px;background-color:#181330;position: absolute; bottom: 0; left: 0;} 

</style> 

</head>

<script>

	function aa(){

		//加上这句IE里解决效果更好

		document.getElementById("divIframe").style.height=document.body.offsetHeight-150-16;

	}

</script>

<body onload="aa();"> 

<div class="layout"> 

	<ul> 

	<li class="header"> </li> 

	<li class="iframe" id=divIframe>

		<iframe id="Iframe" src="http://lastidea.net" frameborder="0" width="100%" height="100%" onload="this.height=document.body.offsetHeight-150-16;"> </iframe> <!-兼容FF,但是要等到框架页加载完成后才有效果~--></li> 

	<li class="footer"> </li> 

	</ul> 

</div> 

</body> 

</html>
前端网易云案例（网页版） html+css+flex布局
我相信大家在点进来的那一刻，那你一定学习前端有一段时间了，你是否还在对属性感到困惑，是否还在因为不会调整盒子，代码逻辑很差，后期做调整也很难受！那麽这篇文章，将会对你做的网页会有更大提高！这篇所有代码...
CSS+DIV视频教程
为了界面能够更快更好的布局。CSS+DVI就能够解决这一问题.能够帮助。之前你只用table试用的困惑。用table布局 总是不能按照自己的要求来实现。
css布局之flex布局
css布局之flex布局，快速掌握flex弹性伸缩布局的妙用。 主要讲解如何在父容器上添加flex-direction、justyfi-content、align-items、align-content等控制样式的属性； 以及如何在子元素上添加order、flex-grow、flex...
flexbox-classes:基于Flexbox的布局中最简单CSS类
有史以来最简单CSS类，用于基于flexbox的布局，其中包含从页面故意复制的注释。 类名大致基于命名约定，但是纯粹主义者可能会担心。 版本 flex@2.1：修复了更多的移动Safari问题 flexbox模型令人困惑吗？ 不，不是...
HTML知识整理、网页制作基础教程 CHM.rar
　有了好的设计理念，才能规划好一个精彩的网站…… 　网页中的平衡、对比、连贯和留白 　韩国商业网站设计分析 　网页设计的布局理念 　平面文字的设计原则及组合 　网页配色之黄金分割法 　网页设计中“面”...
CSS

61,112

社区成员

60,732

社区内容

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

加载中

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

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

+ 用AI写文章