-1
これは私のフッタがかかり、私のコンドミニアムをカバーしていますなぜ私は分かりません。高さisuuesと応答性
私はこれをレスポンシブウェブページとして作成する必要があります。
これを達成する方法は？
私はグーグルで、彼らのほとんどがメディアクエリを使用していますが、わかりません。
ご協力いただければ幸いです。
フッターを右に取った場合：0;フッターが完全に消えます。どんな解決策ですか？あなたは、ブートストラップを使用しているカラム構造にそれを配置する必要があり
body {
margin: 0 px;
}
#wrapper {
width: 100 % ;
height: auto;
margin: 0 px;
background - color: orange;
}
#header, #footer {
width: 100 % ;
height: 50 px;
position: fixed;
background - color: black;
right: 0 px;
z - index: 100;
}
#header {
top: 0;
}
#footer {
bottom: 0;
left: 0;
right: 0;
padding: 10 px;
color: white;
clear: both;
}
#footer img {
float: right;
margin: 5 px;
padding: 5 px;
}
#navbar {
height: 60 px;
width: 100 % ;
background - color: black;
color: white;
float: left;
overflow: hidden;
}
ul li {
display: block;
position: relative;
padding: 20 px 20 px;
float: left;
}
ul li a {
color: white;
}
#navbar a: hover {
border - bottom: 3 px solid red;
padding: 19 px;
}
.active {
background - color: gray;
}
#myCarousel {
\t background - color: white;
\t height: 370 px;
\t width: 100 % ;
\t float: left;
}
.carousel - inner > .item > img,
.carousel - inner > .item > a > img {
width: 70 % ;
height: 15 % ;
margin: auto;
background - color: white;
}
.thumbnail {
height: 300 px;
width: 300 px;
padding: 25 px auto;
margin: 5 px;
}
#con {
width: 100 % ;
height: 300 px;
}
.contact {
width: 60 % ;
height: 300 px;
background - color: grey;
padding: 100 px 25 px;
float: left;
}
.enquiry {
width: 40 % ;
height: 300 px;
background - color: seagreen;
float: left;
padding - left: 5 px;
}
input[type = text]: focus {
border: 3 px solid red;
}
input[type = "text"] {
margin: 0 0 15 px 0;
}<!doctype html>
<html>
<head>
\t <title>student</title>
\t <meta charset="utf-8">
\t <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
\t <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
\t <meta name="HandheldFriendly" content="true">
\t <link rel="stylesheet" type="text/css" href="style.css">
\t <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
\t <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
\t <div id="wrapper">
\t \t <!--start wrapper-->
\t \t <div id="header">
\t \t \t <!--start header-->
\t \t \t <div class="navbar">
\t \t \t \t <!--start nav-->
\t \t \t \t <ul>
\t \t \t \t \t <li><a class="active" href="home.html">Home</li>
\t \t \t \t \t <li><a href="about.html">About us</li>
\t \t \t \t \t <li><a href="services.html">Services</li>
\t \t \t \t \t <li><a href="products.html">Products</li>
\t \t \t \t \t <li><a href="contact.html">Contact us</li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t \t <!--end nav-->
\t \t </div>
\t \t <!--end header-->
\t \t <div id="myCarousel" class="carousel slide" data-ride="carousel">
\t \t \t <!--carasel start-->
\t \t \t <!-- Indicators -->
\t \t \t <ol class="carousel-indicators">
\t \t \t \t <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
\t \t \t \t <li data-target="#myCarousel" data-slide-to="1"></li>
\t \t \t \t <li data-target="#myCarousel" data-slide-to="2"></li>
\t \t \t \t <li data-target="#myCarousel" data-slide-to="3"></li>
\t \t \t \t <li data-target="#myCarousel" data-slide-to="4"></li>
\t \t \t </ol>
\t \t \t <!-- Wrapper for slides -->
\t \t \t <div class="carousel-inner" role="listbox">
\t \t \t \t <!--start carosel inner-->
\t \t \t \t <div class="item active">
\t \t \t \t \t <img src="../task/photo/h.jpg" alt="Home">
\t \t \t \t \t <div class="carousel-caption">
\t \t \t \t \t \t <h3>Home</h3>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="item">
\t \t \t \t \t <img src="../task/photo/as.jpg" alt="About us">
\t \t \t \t \t <div class="carousel-caption">
\t \t \t \t \t \t <h3>About us</h3>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="item">
\t \t \t \t \t <img src="../task/photo/s.jpg" alt="Services">
\t \t \t \t \t <div class="carousel-caption">
\t \t \t \t \t \t <h3>Services</h3>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="item">
\t \t \t \t \t <img src="../task/photo/p.jpg" alt="Products">
\t \t \t \t \t <div class="carousel-caption">
\t \t \t \t \t \t <h3>products</h3>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="item">
\t \t \t \t \t <img src="../task/photo/c.jpg" alt="Contact us">
\t \t \t \t \t <div class="carousel-caption">
\t \t \t \t \t \t <h3>Contact us</h3>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <!--carosel inner end-->
\t \t \t <!-- Left and right controls -->
\t \t \t <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
\t \t \t \t <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
\t \t \t \t <span class="sr-only">Previous</span>
\t \t \t </a>
\t \t \t <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
\t \t \t \t <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
\t \t \t \t <span class="sr-only">Next</span>
\t \t \t </a>
\t \t </div>
\t \t <!--end carosel-->
\t \t <div class="container-fluid text-center bg-grey">
\t \t \t <!--boxes-->
\t \t \t <div class="row text-center">
\t \t \t \t <div class="col-sm-4">
\t \t \t \t \t <div class="thumbnail">
\t \t \t \t \t \t <img src="D:\task\photo\i.jpg" alt="Innovation">
\t \t \t \t \t \t <p> <strong>Innovation</strong>
\t \t \t \t \t \t </p>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="col-sm-4">
\t \t \t \t \t <div class="thumbnail">
\t \t \t \t \t \t <img src="D:\task\photo\cr.png" alt="Creative">
\t \t \t \t \t \t <p> <strong>Creativity</strong>
\t \t \t \t \t \t </p>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="col-sm-4">
\t \t \t \t \t <div class="thumbnail">
\t \t \t \t \t \t <img src="D:\task\photo\po.jpg" alt="Positive">
\t \t \t \t \t \t <p>
\t \t \t \t \t \t \t <strong>Positivity</strong>
\t \t \t \t \t \t </p>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <!--end boxes-->
\t \t \t <div id="con">
\t \t \t \t <!--start con-->
\t \t \t \t <div class="contact">
\t \t \t \t \t <!-- start contact-->
\t \t \t \t \t <h1>Address</h1>
\t \t \t \t \t <p>
\t \t \t \t \t \t <span class="glyphicon glyphicon-map-marker"></span>
\t \t \t \t \t \t Abc private limited no54,2ndstreet, madipakkam, chennai-67.
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t <span class="glyphicon glyphicon-envelope"></span>
\t \t \t \t \t \t [email protected]
\t \t \t \t \t </p>
\t \t \t \t </div>
\t \t \t \t <!--end contact-->
\t \t \t \t <div class="enquiry">
\t \t \t \t \t <!--start enquiry-->
\t \t \t \t \t <h1>Enquiry Form</h1>
\t \t \t \t \t <table border="0" align="center">
\t \t \t \t \t \t <form name="form" action="email.php" id="form" method="post">
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t <td>Name</td>
\t \t \t \t \t \t \t \t \t <td><input name="name" placeholder="Name" type="text" value=""></td>
\t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t <<tr>
\t \t \t \t \t \t \t \t \t <td>Email</td>
\t \t \t \t \t \t \t \t \t <td><input name="email" placeholder="Email" type="text" value=""></td>
\t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t <td>Phone</td>
\t \t \t \t \t \t \t \t \t <td><input name="phone" placeholder="phonenumber" type="text" value=""></td>
\t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t <td>Message</td>
\t \t \t \t \t \t \t \t \t <td><textarea name="msg" placeholder="Type your text here..."></textarea>
\t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t <td colspan="2" style="text-align:center"><input id="send" name="submit" type="submit" value="Submit"></td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t </form>
\t \t \t \t \t </table>
\t \t \t \t </div>
\t \t \t \t <!--end enquiry-->
\t \t \t </div>
\t \t \t <!--end con-->
\t \t \t <div id="footer">
\t \t \t \t <!--start footer-->
\t \t \t \t copyrights © to WWW.abcpvt.com
\t \t \t \t <img src="../task/photo/fb.png" alt="fb" />
\t \t \t \t <img src="../task/photo/ln.png" alt="tweet" />
\t \t \t \t <img src="../task/photo/tw.png" alt="linkedin" />
\t \t \t </div>
\t \t \t <!--end footer-->
\t \t </div>
\t \t <!--end wrapper-->
\t </div>
</body>
</html>
＃詐欺の下パディングを増やします。 –
変更フッターは表示されません – sudharsan
[ここ]（http://meta.stackoverflow.com/questions/291362/advice-for-non-native-english-speakers/291370#291370）では、インターネット通信。 – peterh