0
ページのボトムの上部と下部に固定ヘッダーを設定したいと思います。CSSでヘッダとフッタを設定するには？
イメージ：
インデックスページコード：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="custom.css" rel="stylesheet" type="text/css">
</head>
<body class="bodyy">
<div class="container-fluid form">
<div class="row">
<div class="col-md-12 llg">
<img src="image/my-site-planner-logo.png" class="logo" />
</div>
</div>
</div> <!--container ends-->
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<form method="post" action="" class="formt">
<div class="form-group">
<input class="form-control" required="required" placeholder="Enter Email" id="name" name="name" type="email"/>
<br />
<input class="form-control" id="email" required="required" placeholder="Enter Password" name="password" type="password"/>
<br />
<button class="btn btn-primary bbt" name="submit-" type="submit">
Sign Me In
</button>
<p class="text-center ttr">
Want to Register a New User ?
</p>
<button class="btn btn-primary bbt" name="submit-" type="submit">
<a href="sign-up.html" class="tbb">
Create Account
</a>
</button>
</div>
</form>
</div>
<div class="col-md-3">
</div>
</div> <!--row ends-->
</div> <!--container ends-->
<div class="footer form">
<h4>
© 2016 My Site Planner | All Rights Reserve
</h4>
</div>
</div>
</div> <!--container ends-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<body oncontextmenu="return false">
</body>
</html>
CSSコード：
body{
margin: 0 auto;
background-image: url("white-background-1.jpg");
background-size: 100px 100px,
background-repeat: no-repeat;
}
.ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.container{
width: 400px;
height: 400px;
text-align: center;
background-color: rgba(0, 255, 255, 0.5);
border-radius: 4px;
margin: 0 auto;
margin-top: 150px;
}
.footer .form {
margin-top: 100px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
絶対ヘッダ位置がスクロールされるように、私は.footer .FORMによってコードを変更しようとしました。誰かが私を助けることができますか？
[CSSを使用してこのヘッダー/コンテンツ/フッターのレイアウトを作成する方法は？]（http://stackoverflow.com/questions/7123138/how-to-make-this-header-content-footer-layout- using-css）とhttp://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height –
私はあなたが間違った方法でブートストラップを使用していると思う、特にブートストラップのコンテナクラスに幅を与える。それは後の段階であなたのデザインを台無しにするでしょう。 – Aslam
はい、@hunzaboy。それはダウンロードされたプロジェクトであり、私の上司は私たちにそれに取り組むプロジェクトを与えました。私は何をすることができます。私の心はひっくり返った。 ： – Warda