两框一滚动条

发布于 2024-10-03 18:31:13 字数 2494 浏览 8 评论 0原文

我正在尝试创建两个框架并使它们一起滚动, 例如,在顶部菜单栏不断变化的页面中 - 我正在使用轮播 - 或底部的页脚, 必须作为页面的一部分出现。

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

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

I'm trying to create two frames and make them scroll together,
for instance in the case of a page with a changing menu bar at the top -
I'm using a carousel - or a footer at the bottom,
that must appear as part of the page.

I want a page to look like one page that is also capable of scrolling,
but the page is actually composed of two frames.
Using this...

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

香橙ぽ 2024-10-10 18:31:13

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

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


更新:

您可以通过使两个框架不滚动并将它们包装在第三个​​滚动框架内(其存在的唯一原因是提供单个滚动条)来解决此问题。父框架将同时处理两个内部框架的滚动。

您需要添加一个具有如下框架集的新页面,确保第二个页面指向您的框架集(并在两个框架集上设置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>

When using frames, each will get its own scroll bars.

You can't have a single scroll bar for two frames, precisely because the are two frames.


Update:

You can workaround this by making both frames non scrolling and wrapping both them within a third scrolling frame (whose only reason to exist is to provide a single scroll bar). The parent frame will handle scrolling of both inner frames together.

You need to add a new page with a frameset like the following, making sure the second one points to your frameset (and set SCROLLING="NO" on both framesets:

<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>
一曲琵琶半遮面シ 2024-10-10 18:31:13

我用 IFRAME 得到了你要找的东西。

它比 FRAME 更灵活,因为它不需要将窗口从一个边缘分割到另一个边缘,并且每个帧边界不需要与另一个帧边界对齐。

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

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

<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="contentframe" 的链接可以执行您想要的操作。

I got what you are looking for using IFRAME.

It's even more flexible than FRAME, since it doesn't require you to split the window from edge to edge, and each frame boundary doesn't need to be aligned with another one.

I used this for a webpage I just deployed and it works like a charm.

There is one drawback: the height of the principal frame must be fixed beforehands, and you need to overestimate it in order to avoid an inner scrollbar.

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

Links in menu.html with TARGET="contentframe" do what you want it to do.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文