0

我在尝试根据屏幕大小在页面上移动 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">

测试1.htm：

<body bgcolor="#88888888">
right side text

脚.htm:

<body bgcolor="#9999999">
This is a footer
4

3 回答 3

2

你的标题： 

#topsection{
    position:absolute;
}

您的页脚：

#foot{
    position:absolute;
}

我认为你应该使用绝对

这是有关 css 中位置“标签”的更多信息

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

于 2012-07-06T07:47:37.997 回答
1

对顶部栏和页脚执行此操作。希望可能适用于您的情况。

   #topsection{
       position:fixed;
................ 
        }
    #foot{
position:fixed;
................ 
}
于 2012-07-06T07:41:53.923 回答
0

这正是你想要的。固定页眉和页脚

于 2012-07-06T07:43:27.890 回答