页面将不允许向下滚动以查看页面上的所有内容

时间:2015-01-15 02:41:35

标签: css scroll

我已经为我的田径和越野队建立了一个网站多年,现在我用Dreamweaver创建了大约5或6年前的网站。我最近决定是时候以新的外观更新网站了。但是我遇到了在创建网页之前从未遇到过的问题。我想知道是否使用Dreamweaver CS6与我在5年或6年前使用的任何版本的行为方式不同于我之前做的那么简单并且给我创建页面没有任何问题。

我从一个空白的模板页面创建了一个模板,并在顶部放了几行横幅,上面有一个表,这是一行图像,这些图像就在下面。然后,我的内容会低于我放入可编辑区域的链接行。我已经设置了模板并使用该模板开始在我的第一页上工作,但是我遇到了一个我似乎无法解决的问题。无论我在多个浏览器中预览时,我在可编辑区域中查看的内容都很好,除了任何低于屏幕底部的内容我都看不到,页面也不会滚动。我花了几天时间试图找出如何让我的页面向下滚动到所有内容,但无法弄清楚如何让它执行此操作或者我的CSS设置中是否存在阻止我滚动的能力。我在该类型的横幅设置在固定位置,以便它们始终保持在页面顶部。我想知道这是否与滚动问题有关?我见过这里的人说使用固定设置是不好的方法。但是,当我将它们更改为相对时,我无法将我的横幅放到页面顶部,我想要它们,这会弄乱页面的外观。在过去,当我设计网页时,我有需要滚动的内容,页面总是自动滚动,我没有必要考虑它。我尝试使用它来附加模板和页面,但我认为我不能在这里做到这一点,因此我将下面的代码放在我使用模板创建的页面中。任何帮助将不胜感激。

CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Track and Field.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
#Content {
  width: 100%;
  position: relative;
  left: 0px;
  top: 2in;
  height: 50in;
}
.style2 { color: #006699;
  font-size: 12px;
}
.style3 {
  color: #006699;
  font-size: 16px;
}
.style5 {
  font-size: 36px;
  font-family: Verdana, Geneva, sans-serif;
  color: #021480;
  font-weight: bolder;
}
.style9 {
  font-size: 16px;
  color: #D48B68;
  font-family: Verdana, Geneva, sans-serif;
}
.style11 {color: #FFFFFF}
.style12 {color: #FFFF00; font-size: 12px; }
.style13 {color: #FFFFFF; font-size: 12px; }
.style31 {color: #006699}
.style4 {font-size: 24px}
.style91 {font-size: 10px; color: #FFFFFF; }
</style>
<!-- InstanceEndEditable -->
<style type="text/css">
#TFBannerPic {
  height: 1in;
  width: 100%;
  position: fixed;
  left: 0in;
  top: 0in;
  z-index: -100;
  /* [disabled]max-width: 1040px; */
}
#TFBanner {
  height: .5in;
  width: 100%;
  position: fixed;
  left: 0px;
  top: 1in;
}
#Links {
  height: .5in;
  width: 100%;
  position: fixed;
  left: 0in;
  top: 1.5in;
}
#Content {
  width: 100%;
  position: fixed;
  left: 0in;
  top: 2.5in;
  height: auto;
}
</style>
</head>
<body id="Content">
<p><img src="Graphics/Web%20Background/Northwest-Track-Stadium-Banner.png" name="TFBannerPic" width="765" height="216" id="TFBannerPic" longdesc="../Graphics/Web Background/Northwest-Track-Stadium-Banner.png" /></p>
<p><img src="Graphics/Web%20Background/Northwest-TF-Banner.png" name="TFBanner" width="994" height="66" id="TFBanner" longdesc="../Graphics/Web Background/Northwest-TF-Banner.png" /></p>
<table width="106%" border="0" id="Links">
  <tr>
    <td width="83" bgcolor="#2A4D6E"><div align="center"><img src="Graphics/Web%20Background/Home-Logo-Icon.png" width="79" height="65" longdesc="../Graphics/Web Background/Home-Logo-Icon.png" /></div></td>
    <td width="86" bgcolor="#728CA6"><div align="center"><img src="Graphics/Web%20Background/Lion-Head-Logo.png" width="86" height="48" longdesc="../Graphics/Web Background/Lion-Head-Logo.png" /></div></td>
    <td width="86" bgcolor="#2A4D6E"><div align="center"><img src="Graphics/Web%20Background/May-Calendar.png" width="76" height="61" longdesc="../Graphics/Web Background/May-Calendar.png" /></div></td>
    <td width="91" bgcolor="#728CA6"><div align="center"><img src="Graphics/Web%20Background/Coaching-Staff.png" width="87" height="52" longdesc="../Graphics/Web Background/Coaching-Staff.png" /></div></td>
    <td width="86" bgcolor="#d48b68"><div align="center"><img src="Graphics/Web%20Background/Records.png" width="76" height="65" longdesc="../Graphics/Web Background/Records.png" /></div></td>
    <td width="86" bgcolor="#2A4D6E"><div align="center"><img src="Graphics/Web%20Background/History.png" width="66" height="66" longdesc="../Graphics/Web Background/History.png" /></div></td>
    <td width="86" bgcolor="#FFEBA8"><div align="center"><img src="Graphics/Web%20Background/Track-Events.png" width="82" height="66" longdesc="../Graphics/Web Background/Track-Events.png" /></div></td>
    <td width="86" bgcolor="#D48B68"><div align="center"><img src="Graphics/Web%20Background/Tracks.png" width="79" height="66" longdesc="../Graphics/Web Background/Tracks.png" /></div></td>
    <td width="86"><div align="center"><img src="Graphics/Web%20Background/In-The-News.png" width="79" height="75" longdesc="../Graphics/Web Background/In-The-News.png" /></div></td>
    <td width="86" bgcolor="#FFEBA8"><div align="center"><img src="Graphics/Web%20Background/Links.png" width="70" height="75" longdesc="../Graphics/Web Background/Links.png" /></div></td>
    <td width="86" bgcolor="#D48B68"><div align="center"><img src="Graphics/Web%20Background/Alumni.png" width="83" height="59" longdesc="../Graphics/Web Background/Alumni.png" /></div></td>
  </tr>
</table>
<!-- InstanceBeginEditable name="Content" -->
<div align="center" id="Content">
  <table width="100%" border="0">
    <tr>
      <td><div align="center" class="style5" id="style5">Track and Field Events</div></td>
    </tr>
  </table>
  <table width="100%" border="0">
    <tr>
      <td><p class="style3" id="style3">There are 12 running events and 6 field events in a normal high school track meet in Missouri. In addition, there are an additional 5 relay events, 1 field event, and 1 multi-event that are contested at some meets, but are not normal high school events in Missouri-these are listed in italics. Below is a description and diagram of each event. To jump to a particular event click on the event below. </p>
      <p class="style3"></p></td>
    </tr>
  </table>
  <table width="50%" border="0">
    <tr>
      <td width="50%"><div align="center"><span class="style3"><a href="events.htm#100m">100m Dash </a></span></div></td>
      <td><div align="center"><em><span class="style3"><a href="events.htm#4x1600">4 x 1600m Relay</a></span></em></div></td>
    </tr>
    <tr>
      <td><div align="center"><span class="style3"><a href="events.htm#200m">200m Dash</a></span></div></td>
      <td width="50%"><div align="center"><em><span class="style3"><a href="events.htm#sprintmedley">Sprint Medley Relay (800m)</a></span></em></div></td>
    </tr>
    <tr>
      <td><div align="center"><span class="style3"><a href="events.htm#400m">400m Dash </a></span></div></td>
      <td><div align="center"><em><span class="style3"><a href="events.htm#distancemedley">Distance Medley Relay (4,000m)</a></span></em></div></td>
    </tr>
    <tr>
      <td><div align="center"><span class="style3"><a href="events.htm#800m">800m Run </a></span></div></td>
      <td><div align="center"><em><span class="style3"><a href="events.htm#1600medley">1600m Sprint Medley Relay</a></span></em></div></td>
    </tr>
    <tr>
      <td><div align="center"><span class="style3"><a href="events.htm#1600m">1600m Run </a></span></div></td>
      <td><div align="center"><span class="style3"><a href="events.htm#longjump">Long Jump </a></span></div></td>
    </tr>
    <tr>
      <td><div align="center"><span class="style3"><a href="events.htm#3200m">3200m Run </a></span></div></td>
      <td><div align="center"><span class="style3"><a href="events.htm#triplejump">Triple Jump </a></span></div></td>
    </tr>
    <tr>
      <td><div align="center"><span class="style3"><a href="events.htm#100h">100m Hurdles</a></span></div></td>
      <td><div align="center"><span class="style3"><a href="events.htm#highjump">High Jump </a></span></div></td>
    </tr>
    <tr>
      <td><div align="center"><span class="style3"><a href="events.htm#300h">300m Hurdles</a></span></div></td>
      <td><div align="center"><span class="style3"><a href="events.htm#polevault">Pole Vault </a></span></div></td>
    </tr>
    <tr>
      <td><div align="center"><span class="style3"><a href="events.htm#hurdlerelay"><em>Shuttle Hurdle Relay </em></a></span></div></td>
      <td><div align="center"><span class="style3"><a href="events.htm#shotput">Shot Put </a></span></div></td>
    </tr>
    <tr>
      <td><div align="center"><span class="style3"><a href="events.htm#4x100">4 x 100m Relay</a></span></div></td>
      <td><div align="center"><span class="style3"><a href="events.htm#discus">Discus</a></span></div></td>
    </tr>
    <tr>
      <td><div align="center"><span class="style3"><a href="events.htm#4x200">4 x 200m Relay </a></span></div></td>
      <td><div align="center"><em><span class="style3"><a href="events.htm#pentathlon">Pentathlon</a></span></em></div></td>
    </tr>
    <tr>
      <td><div align="center"><span class="style3"><a href="events.htm#4x400">4 x 400m Relay</a></span></div></td>
      <td><div align="center"><em><span class="style3">Javelin</span></em></div></td>
    </tr>
    <tr>
      <td><div align="center"><span class="style3"><a href="events.htm#4x800">4 x 800m Relay</a></span></div></td>
      <td><div align="center"></div></td>
    </tr>
  </table>
  <p>&nbsp;</p>
  <table width="90%"  border="1" align="center" cellpadding="2">
    <tr>
      <td colspan="2" class="style31"><div align="center" class="style4"><a name="100m" id="100m"></a>100m Dash </div></td>
    </tr>
    <tr>
      <td colspan="2" class="style2">The 100m is the classic sprints race distance. The reigning 100m world record holder is often named &quot;the fastest man/woman in the world&quot;, and the 100 m Olympic title is usually considered among the most prestigious. This 100m is the domain of absolute speed. Athletes of all builds can do well at this distance. Being fast means being able to transmit the orders needed for muscular contraction instantly from the brain. When the gun fires, athletes must react with adrenaline-charged urgency. The 100m demands exceptional reflexes at the start and great explosive power. In the first few strides sprinters must have perfect control of movement and balance without &quot;tightening up&quot;. Then they must use their acceleration skills to reach top speed. Since it is difficult to maintain top speed after 6 to 7 seconds of effort, sprinters need strong muscles and relaxed technique. Maintaining the right balance between frequency and length of stride is the key to sprint technique. The 100m can be broken down into basic phases of start, pick-up and finish. The right blend gets results. </td>
    </tr>
    <tr>
      <td colspan="2"><span class="style2">World Record: 10.49-Florence Griffith Joyner-United States-July 16, 1988</span></td>
    </tr>
    <tr>
      <td colspan="2"><span class="style2">American Record: 10.49-Florence Griffith Joyner-United States-July 16, 1988</span></td>
    </tr>
    <tr>
      <td colspan="2"><span class="style2">U.S. High School Record: 11.11-Angela Williams (Chino H.S., Chino, CA)-1998</span></td>
    </tr>
    <tr>
      <td colspan="2"><span class="style2">Missouri State Record: 11.66-Muna Lee (Kansas City Central H.S.)-1999 </span></td>
    </tr>
    <tr>
      <td colspan="2"><span class="style2">Northwest School Record: 12.29-Chandra Chilges-1992</span></td>
    </tr>
    <tr>
      <td rowspan="2"><div align="center"><img src="Graphics/Helpers/Events/100m.jpg" alt="100m Dash" width="360" height="306" /></div></td>
      <td align="left" class="style3"><div align="center">Florence Griffith Joyner's 100m World Record:</div></td>
    </tr>
    <tr>
      <td><div align="center">
        <object width="340" height="285" align="absmiddle">
          <param name="allowFullScreen" value="true" />
          <param name="allowscriptaccess" value="always" />
          <param name="Flo Jo 100m" value="http://www.youtube.com/v/Kg_ypZ5kBcI&amp;hl=en&amp;fs=1&amp;rel=0&amp;color1=0x5d1719&amp;color2=0xcd311b&amp;border=1" />
          <embed src="http://www.youtube.com/v/Kg_ypZ5kBcI&amp;hl=en&amp;fs=1&amp;rel=0&amp;color1=0x5d1719&amp;color2=0xcd311b&amp;border=1" width="340" height="285" align="absmiddle" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
        </object>
      </div></td>
    </tr>
  </table>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>

1 个答案:

答案 0 :(得分:0)

使用position: CSS对于您所描述的内容不正确。删除所有position: css属性,页面应该开始正常工作。