网页不会滚动

时间:2013-02-19 19:56:57

标签: html webpage windows-server-2003

我制作的网页不允许我滚动。我怎样才能解决这个问题? 除了查看代码,您还可以在this address查看实时网站 此外,选项卡仅在某些Web浏览器上查看。如何在所有浏览器上制作它?

    <!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js b1" lang="en"> <!--<![endif]--> <!--[TO PUT THE BACKGROUND BACK, CHANGE "b1" to "bg1"-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/i/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">

  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css">  

  <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except this Modernizr build.
       Modernizr enables HTML5 elements & feature detects for optimal performance.
       Create your own custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  <header>
<h1>The Down Syndrome Awareness Foundation (DASF)</h1>
  </header>
  <div id="image">
  <img src="img/zoom.png">    
        <a href="img/big.JPG" class="MYCLASS" title="DSAF Logo">  
    <img src="img/small.JPG" title="Our Logo">  
    </a>  
  </div>

   <div id="back" >
  <img src="img/back.png" alt-text="Back" title="Back">    
  </div>

  <div role="main" id="container">

    <div id="primary">
        <h2>TITLE ONE</h2>
        </pre>
        <p>TEXT</p>
        <p>MORE TEXT, ANOTHTER PARAGRAPH</p>

    </div>

    <div id="content" class="one-edge-shadow">
        <!-- <h2>Main content</h2> -->
        <div id="tabContainer">
        <div class="tabs">
            <ul>
            <li id="tabHeader_1">About the Disorder</li>
            <li id="tabHeader_2">TAB 2</li>
            <li id="tabHeader_3">Commercial</li>
            </ul>
  </div>
  <div class="tabscontent">
    <div class="tabpage" id="tabpage_1">
        <h2>HEADER ONE</h2>
        <p><strong>What is Down Syndrome?:</strong></p>
        <p></p>
        <p><strong>Quality of Life:</strong></p>
        <ul>
        <li>A person with Down Syndrome in 1900 could expect to live to about 9-11 years. Now, patients with Down Syndrome live to 50 years old, with a ratio of 1:10 living to 70
        <li>About 92% of pregnant women with babies with Down Syndrome elect to terminate the pregnancy
        <li>Rate of bullying to children is increased to children with disorders is much higher
        <li>Increase risk for Alzheimer’s Disease, Cancers, Celiac Disease, and Vision and Hearing Impairment
        </ul>
        <p><strong>Severity:</strong></p>
        <p></p>
        <p><strong>Famous Cases:</strong></p>
        <p></p>
        <p><strong>Special Olympics:</strong></p>
        <p></p>
    </div>
    <div class="tabpage" id="tabpage_2">
        <h2>HEADER 2</h2>
        <hr>
      <p><strong>Clinical Science</strong></p>
      <p></p>
      <p><strong>Causes:</strong></p>
                <ul>
                <li>Having a third copy, or part of a third copy of chromosome 21
                <li>1% of cases are hereditary, the other 99% of cases are random or based on the mother’s age being over thirty-five (35) years 
                </ul>
      <p><strong>Symptoms:</strong></p>
                <ul>
                <li>Delayed physical, social, and intellectual development</li>
                <li>Decreased muscle tone</li>
                <li>Short neck, excess skin on the back of the neck</li>
                <li>Flattened facial profile</li>
                <li>Upward slanting eyes</li>
                <li>Skin fold that comes out from the upper eyelid and covers the corner of the eye</li>
                <li>Wide, short hands and short fingers</li>
                <li>A single deep crease in the palm of the hand</li>
                <li>White spots on the coloured part of the eye</li>
                <li>Deep groove between the first and second toes</li>
                </ul>
      <p><strong>Treatment</strong></p>
      <p>There is no cure for Down Syndrome, however there are treatments to minimalise the symptoms and the conditions associated with them. Speech and coordination can be improved by occupational therapy and special education.</p>
      <p><strong>Heart Defects Related to Down Syndome</strong></p>
      <p></p>
    </div>
    <div class="tabpage" id="tabpage_3">
        <h2>As Seen on "The Today Show"</h2>
      <p>PARAGRAPH ONE BECAUSE I'M SO LAZY AND CAN'T ADD MORE, SORRY</p>
    </div>
      </div>
        <!-- <p>Inner containers can be set using % measurements which are relative to the parent container.</p>
        <p>If the outermost container is set in 'em' and the inner containers are set in % everything will ultimately be relative to the font-size.</p>
        <p>To create elastic grids you can do the initial math using absolute px measurements and then use the following formula to convert to relative measurements.</p>
        <p><strong>target &divide; context = result</strong></p> -->
        <div id="button-box">

            <a  class="button">About Us</a>

        </div>
    </div>

    <div id="secondary" class='visuallyhidden'>
        <h2>Seconday Sidebar</h2>
        <pre>
#secondary {
  float:left;
  width:25%;
}
        </pre>
        <p>One potential gotcha is if you change font-sizes on internal containers. That can change the context of measurements inside the container.</p>
        <p>You can mitigate this problem by changing font sizes on elements other than the containers themselves.</p>
    </div>
    </div>
    <div id="remedy" class="one-edge-shadow">
        <h2>Meet the Team</h2>
        <p>I CAN PUT BULLETS IN LATER</p>
        <p>BUT IM JUST SO TIRED</p>
        <p>DURRRRR</p>
        <p><strong>I CAN EVEN MAKE IT BOLD!</strong></p>
    </div>
  <footer>

  </footer>


  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
   <!--  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> -->
  <script src="js/jquery-1.7.2.min.js"></script>
 <script type='text/javascript' src='js/jquery.jqzoom-core.js'></script> 
 <script src="js/acidTabs.js"></script>

  <!-- scripts concatenated and minified via build script -->
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>

  <!-- end scripts -->

  <!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
       mathiasbynens.be/notes/async-analytics-snippet -->
  <script>
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
  </script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

变化:

html {
    overflow: hidden;
}

为:

html {
    overflow: auto;
}