Question

当生成太多输入框时，我的HTML表单会脱离页面底部。当它这样做时我无法向下滚动。我怎样才能解决这个问题？也许我需要将表单的位置向上移动一点，因为无论表单的长度如何，表单的高度始终相同。

HTML：

<html >

<title>Register User</title>

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">

 <h1>Gym Planner</h1>

<form method="post" action="RUN THAT CODE">
    <?php
        foreach($exer->results() as $ex){
            $name = $ex->Name;
            $curId = $ex->ExerciseID;
            $sql2 = "SELECT * FROM exercises WHERE ExerciseID = ".$curId;
            $details = DB::getInstance()->query($sql2);
            $reps = $details->results()[0]->StartReps;
            $sets = $details->results()[0]->StartSets;
            $weight = $details->results()[0]->StartWeight;

            ?>
                <div class="exdisplay">
                    <center><input type="text" name="exercise" id="exercise" placeholder="Exercise" value = "<?php echo $name ?>" autocomplete="off" required /></center>
                </div>

                <div class="statdisplay">
                    <center><label>Reps:</label> <input type="text" name="reps" id="reps" placeholder="Reps" value = "<?php echo $reps ?>" autocomplete="off" required /></center>
                    <center><label>Sets:</label> <input type="text" name="sets" id="sets" placeholder="Sets" value = "<?php echo $sets ?>" autocomplete="off" required /></center>
                    <center><label>Weight:</label> <input type="text" name="weight" id="weight" placeholder="Weight" value = "<?php echo $weight ?>" autocomplete="off" required /></center>
                </div>
            <?php
        }
    ?>
    <center><button type="submit" class="btn">Save</button></center>
</form>

</div>

CSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }

html { width: 100%; height:100%; overflow:hidden; 
    background: url("gym.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body { 
    width: 100%;
    height:100%;
    font-family: 'Open Sans', sans-serif;
}

.login { 
    position: absolute;
    top: 43%; /* Form is 45% from top */
    left: 50%; /* Form is 50% across screen*/
    margin: -150px 0 0 -150px; /* Position of form on screen */
    width:300px; /* width of form */
    height:300px; /* height of form */
    border: 5px;
}

label {
    color: #fff;
    text-shadow: 2px 2px 4px #000000;
    letter-spacing:2px; 
    text-align:center; 
    margin-bottom: 15px;  /* Space below title */
}
.login input {
    width: 100%; /* 100% of form */
    margin-bottom: 10px; /* gap in between each element */
    background-color: rgba(0,0,0,0.5); /* background color (opacity 3) of all INPUT elements in login class*/
    border: none; /* Border of input elements in login class */
    outline: none;
    padding: 10px; /* height of each input element in login class*/
    font-size: 13px; /* font size */
    color: #fff; /* font color */
    border: 1px solid rgba(0,0,0,0.2); /* 1 pixel black border of opacity 2 for each input element in login*/
    border-radius: 4px; /* can curve the login details elements */
}

.slide input {
    width: 10%;
}

.exdisplay input {
    width: 75%;
    text-align: center;
}

.statdisplay input {
    width: 30px;
    height: 10px;
    text-align: center;
}

Answer 1

将overflow属性添加到要滚动的div。

.login { 
    overflow-y: scroll;
}

Answer 2

.login { 
    position: absolute;
    top: 0%; /* Form is 45% from top */
    left: 50%; /* Form is 50% across screen*/
    margin: -150px 0 0 -150px; /* Position of form on screen */
    width:300px; /* width of form */
    height:300px; /* height of form */
    border: 5px;
    overflow: scroll;
}

Answer 3

由于CSS文件中的overflow:hidden;属性，您无法滚动网页。

尝试删除overflow:hidden;代码

的样式html

我的表格偏离页面底部

3 个答案: