CSSフォームのスクロール/オーバーフロー

Question

次のフォームのWebページがあります。 HTMLは下に示されています（質問に関連しない他の無関係のHTMLは削除されています）。問題は、フォームがスクロールしていないことです。特定の要素のみが表示され、ページの残りの部分はスクロールしません（私は、フォームの残りの部分を見ることができるように、フォーム1をスクロール可能にします）。私はオーバーフロー：スクロールを設定しましたが、これは違いはありません。何か案は？

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

これを試してください：

は、フォームコンテナにいくつかの高さを追加します。

#form1{height:400px;overflow-y:auto} 

したがって、フォームの内容がフォームの高さを超える場合、フォームはスクロールします。