两个框架一个滚动条

时间:2010-11-21 11:20:21

标签: html frames

我正在尝试创建两个框架并使它们一起滚动,     例如,如果页面顶部有更改的菜单栏 - 我正在使用旋转木马 - 或底部的页脚,     必须作为页面的一部分出现。

我希望页面看起来像一个也能够滚动的页面,      但页面实际上由两个框架组成。     使用这个......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

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

<head>

<!-- Info from: http://www.webxpertz.net/forums/showthread.php?t=257 -->
<!-- Using this... -->

<meta NAME="Description" content="Outer frame(OneBaredFrame) used to wrap the header and body frames" />
<meta HTTP-EQUIV="Cache-Control" content="no-cache" />
<meta HTTP-EQUIV="pragma" content="no-cache" />

<title></title>

</head>

<frameset rows="1,*" border="0" frameborder="no">

<frame src="javascript:<HTML></HTML>" name="dummy" id="dummy" 
frameborder="no" marginheight="0" marginwidth="0" noresize="noresize" scrolling="no"></frame>

<frame src="index_inner.html" name="OneBaredFrame"
 id="OneBaredFrame" frameborder="no" marginheight="0" marginwidth="0"  noresize="noresize" scrolling="yes"></frame>

<!-- the bottom frame above if scrolling="yes" doesn't show a scrollbar for me? -->

<!-- the top frame above if scrolling="yes" does show a scrollbar for me if rows="100,*" say? -->

</frameset>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

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


<head>

<meta NAME="Description" content="Frames for within a scrollable frame">

<meta HTTP-EQUIV="Cache-Control" content="no-cache">

<meta HTTP-EQUIV="pragma" content="no-cache">

<title></title>

</head>

 <!-- My header and body frames need to scroll together, 
 so I am using another frameset (the one above) to enclose these frames -->

<frameset rows="215,*" border="0" frameborder="no"> 
<frame src="Header.html" id="header" name="header" frameborder="no"
 marginheight="0" marginwidth="0" noresize="noresize" scrolling="no"></frame>

<frame src="index_body.html" id ="body" name="body" frameborder="no" 
marginheight="0" marginwidth="0" noresize="noresize" scrolling="no"></frame>

<!-- when the above are set to scrolling="yes" scrollbars appear for me for each -->

</frameset>

</html> 

2 个答案:

答案 0 :(得分:1)

使用框架时,每个框架都会有自己的滚动条。

两帧不能有一个滚动条,正是因为 两帧。


更新

你可以通过使两个框架不滚动并将它们包装在第三个​​滚动框架内(其存在的唯一理由是提供单个滚动条)来解决方法 。父框架将处理两个内部框架的滚动。

您需要添加一个包含如下框架集的新页面,确保第二个框架指向您的框架集(并在两个框架集上设置SCROLLING="NO"

<FRAMESET ROWS="0%,100%"
  BORDER="0"
  FRAMEBORDER="NO">
  <FRAME SRC=""
    NAME="dummy"
    FRAMEBORDER="NO"
    MARGINHEIGHT="0"
    MARGINWIDTH="0"
    NORESIZE
    SCROLLING="NO">
  </FRAME>
  <FRAME SRC="*url to your frameset*"
    NAME="myframes"
    FRAMEBORDER="NO"
    MARGINHEIGHT="0"
    MARGINWIDTH="0"
    NORESIZE
    SCROLLING="YES">
  </FRAME>
</FRAMESET>

答案 1 :(得分:0)

我使用IFRAME获得了你想要的东西。

它比FRAME更灵活,因为它不要求你从一个边缘到另一个边缘分割窗口,并且每个边框边界不需要与另一个边框对齐。 / p>

我将它用于我刚刚部署的网页,它就像一个魅力。

有一个缺点:主框架的高度必须在前端固定,并且您需要高估它以避免内部滚动条。

<BODY>
<CENTER>
  <DIV style="display:table-cell; width:800; ">
      <iframe WIDTH=800 HEIGHT=220 src="menu.html" name="topframe" frameBorder=0 SCROLLING=NO></iframe>
      <iframe WIDTH=800 HEIGHT=380 src="home.html" name="contentframe" frameBorder=0 SCROLLING=AUTO></iframe>
      <iframe WIDTH=800 HEIGHT=220 src="menu.html" name="bottomframe" frameBorder=0 SCROLLING=NO></iframe>
  </DIV>
<CENTER>
</BODY>

menu.html中的链接与TARGET =&#34; contentframe&#34;做你想做的事。