我在尝试根据屏幕尺寸移动页面上的 div 时遇到问题..
我的页面(代码如下)正确显示宽度，但当用户调整页面大小时似乎无法正确显示高度。
我想做的是..
- 有一个显示在顶部的标题
- 左边的一个页面，里面有一个菜单
- 右边的页面将显示页面文本
- 底部的页脚
我的页面如下所示:
索引.htm:
<style type="text/css">
body{
margin:0;
padding:0px;
line-height: 1.5em;
padding-bottom:10px; /* Height of the footer */
}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
</style>
<!-- top -->
<div id="topsection">
<div>
This is the top
</div>
</div>
<!-- Left side -->
<div ID="left" STYLE="width:260px; left:0px; height:90%; float:left;">
<iframe src="test.htm" NAME="menu" width="270px" height="100%" frameborder="0"></iframe>
</div>
<!-- right side -->
<div ID="right" STYLE="height:90%; left:0px; float:left;">
<iframe src="test1.htm" NAME="right" width="100%" height="100%" frameborder="0"></iframe>
</div>
<!-- footer -->
<div ID="foot" STYLE="height:10%; left:0px; top:90%; float:left;">
<iframe src="foot.htm" NAME="footer" width="100%" height="100%" frameborder="0"></iframe>
</div>
测试.htm:
<body bgcolor="#808080">
test1.htm:
<body bgcolor="#88888888">
right side text
脚.htm:
<body bgcolor="#9999999">
This is a footer
最佳答案
你的标题:
#topsection{
position:absolute;
}
你的页脚:
#foot{
position:absolute;
}
我认为你应该使用绝对值
这里有一些关于 css 中位置 'tag' 的更多信息
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
关于css - 页面布局在 html/css 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11357856/