CSS Formular Scroll/Overflow

Question

Ich habe die folgende Webseite mit einem Formular. Der HTML-Code wird unten angezeigt (andere irrelevante HTML, die für die Frage nicht relevant ist, wurde entfernt). Das Problem ist, dass das Formular nicht scrollt. Nur bestimmte Elemente werden angezeigt und der Rest der Seite wird nicht gescrollt (ich möchte nur, dass das Formular, das Formular1, scrollbar ist, damit ich den Rest des Formulars sehen kann). Ich habe einen Überlauf eingestellt: Scroll, aber das hat keinen Unterschied gemacht. Irgendwelche Ideen?

HTML:

<div id="mainwrapper"> 

     <div id="contentwrapper"> 

      <div id="content">  
<div id="form1"> 

      <fieldset> 
         <legend>Account Information</legend> 




              <div id="form1c"> Billing Address  </div> 
             <div id="form1a"> 
             House/Flat number 
             <br>Street 
             <br>Town 
             <br>Postcode 
             <br> Country 
            </div> 

             <div id="form1c"> Payment Card Details </div> 
             <div id="form1a"> 
             Cardholder's Name 
             <br>Type of card 
             <br>Card Number 
             <br>Start Date 
             <br>End Date 
             <br>CVN Number 
            </div> 

             <div id="form1c"> Payment Card Details </div> 
             <div id="form1a"> 
             Cardholder's Name 
             <br>Type of card 
             <br>Card Number 
             <br>Start Date 
             <br>End Date 
             <br>CVN Number 
            </div> 



            </div> 

            <div id="editaddressbutton"> 
            <a href="editaddress.html">Edit</a> 
            </div> 

            <div id="editaddressbuttona"> 
            <a href="card.html">Edit</a> 
            </div> 


            </div> 


           </div> 

       </div> 

    <div id="footer"> 
     Copyright 2016 | All Rights Reserved | Copyright | Disclaimer | Privacy Policy | Terms and Conditions of use 

     </footer> 

</body> 

CSS:

 body{ 
      margin:0; 
      padding:0; 
      font-family: Sans-Serif; 
      line-height: 1.5em; 
       overflow: scroll; 

     } 

     #header { 
      background: #8b0000; 
      height: 40px; 
     } 


     #mainwrapper { 
      overflow: scroll; 
     } 



     #content { 

      height: 550px; 
      overflow: scroll; 

     } 

#form1 { 
     position: fixed; 
left: 450px; 
top: 200px; 
    margin-left: -15px; 
    width:500px; 
margin-right: -15px; 
overflow: scroll; 
     } 


      #form1a { 
font-size: 70%; 
overflow: scroll; 
     } 

     #form1c { 
color: #8b0000; 
overflow: scroll; 
     } 

#footer{ 
      clear: left; 
      width: 100%; 
       background: #8b0000; 
      height: 40px; 
      text-align: center; 
      padding: 5px 0; 
      height: 40px; 
      color:#ffffff; 
      font-size: 70%; 

     } 

Answer 1

Bitte versuchen Sie dies:

etwas Höhe zu Ihrem Formular Container hinzufügen.

Wenn der Formularinhalt mehr als die Höhe des Formulars ist, scrollt das Formular.