Two frames one scrollbar

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>

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>

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.

来源：https://stackoverflow.com/questions/4237566/two-frames-one-scrollbar

标签

html

frames