-1
私はヘッダーとフッターを固定し、中央は長方形ボックスのログインフォームですが、それは応答しません。私のログインページに反応します
どのようにすべてのデバイスやブラウザで応答するようにしますか？
私の画面では、細かいところを開いていてもモバイルのフッターには非常に近く、触れられています。そうでなければ、私はログインしたレスポンスヘッダフッタが必要です。
<section class="container login-form">
<section>
<body class="container index">
<div class="row">
<form class="form-horizontal" name="contact_form" id="contact_form" method="post" action="">
<input type="hidden" name="mode" value="login" >
<div class="heading">
<p>LOGIN</p>
</br>
</div>
<div class="form-group">
<label class="col-lg-4 control-label" for="username">
<span class="required">*</span>Username</label>
<div class="col-lg-8">
<input type="text" value="" placeholder="User Name" id="username" class="form-control" name="username" required="" >
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label" for="user_password">
<span class="required">*</span>Password</label>
<div class="col-lg-8">
<input type="password" value="" placeholder="Password"
id="user_password" class="form-control" name="user_password"
required="">
</div>
</div>
</br>
<div class="form-group">
<div class="col-lg-4 col-lg-offset-8">
<button type="submit" name="go" class="btn btn-primary
btn-block">Login Now</button>
</div>
</div>
</section>
</section>
.heading p {
font-family: "Times New Roman", Georgia, Serif;
font-size: 26px;
color: #054185;
display: block;
}
.section {
height: 100%;
clear: both;
padding: 0px;
margin: 0px;
}
.form-group
{
font-family: "Times New Roman", Georgia, Serif;
font-size: 18px;
color: #054185;
}
.login-form {
text-align: center;
margin: 0 auto;
margin-top: 150px;
margin-bottom: 200px;
max-width: 460px;
}
.login-form > section {
background: rgba(255,255,255,.9);
padding: 35px 35px 25px 35px;
border-radius: 5px;
}
.login-form a {
color: #054185;
}
.login-form img {
display: block;
margin: 0 auto;
margin-bottom: 35px;
}
form[role=login] {
font: 13px/2.2em Lato, serif;
color: #999;
}
form[role=login] input,
form[role=login] > button {
font-size: 16px;
}
form[role=login] input {
color: #777;
background: #fbfbfb;
border: 1px solid #c1c1c1;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 1px 1px rgba(150, 150, 150, .1);
-moz-box-shadow: inset 0 0 1px 1px rgba(150, 150, 150, .1);
box-shadow: inset 0 0 1px 1px rgba(150, 150, 150, .1);
}
form[role=login] > div {
margin: 25px 0;
}
form[role=login] > div button {
font-weight: bold;
font-size: 16px;
line-height: 1.25em !important;
border: 1px solid #c1c1c1;
background: #efefef; /* Old browsers */
background: -moz-linear-gradient(top, #efefef 0%, #d1d1d1 100%); /*
FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-
stop(0%,#efefef), color-stop(100%,#d1d1d1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #efefef 0%,#d1d1d1 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #efefef 0%,#d1d1d1 100%); /* Opera
11.10+ */
background: -ms-linear-gradient(top, #efefef 0%,#d1d1d1 100%); /* IE10+
*/
background: linear-gradient(to bottom, #efefef 0%,#d1d1d1 100%); /* W3C
*/
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#efefef', endColorstr='#d1d1d1',GradientType=0); /* IE6-9
*/
}
form[role=login] > button {
padding: 5px 40px;
margin-top: 15px;
margin-bottom: 15px;
background: #054185;
}