CSS 表单滚动/溢出

Question

我有以下带有表单的网页。 HTML 如下所示（与问题无关的其他无关 HTML 已被删除）。问题是表单不滚动。只显示某些元素，页面的其余部分不会滚动（我只希望表单 form1 可滚动，以便我可以看到表单的其余部分）。我已经设置了溢出：滚动，但这并没有什么不同。有什么想法吗？

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}

这样如果表单内容超过了表单的高度，那么表单就会滚动。