1
入力ボックスが多すぎると、自分の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;
}
のスタイル
overflow:hidden;を削除してください。 –