身高问题和反应能力

时间：2016-08-25 12:37:51

标签： html css

在这个我的页脚占据并覆盖我的内容，我不知道为什么。

我需要将其设为响应式网页。

如何实现？

我用谷歌搜索，发现大多数人都在使用媒体查询，但我无法理解。

如果我右脚：0;然后页脚完全消失。任何解决方案？

＆＃13;
＆＃13; 
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 {
	background - color: white;
	height: 370 px;
	width: 100 % ;
	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;
}
＆＃13; 
    <!doctype html>
<html>

<head>
	<title>student</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="HandheldFriendly" content="true">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
	<div id="wrapper">
		<!--start wrapper-->
		<div id="header">
			<!--start header-->
			<div class="navbar">
				<!--start nav-->
				<ul>
					<li><a class="active" href="home.html">Home</li>
					<li><a href="about.html">About us</li>
					<li><a href="services.html">Services</li>
					<li><a href="products.html">Products</li>
					<li><a href="contact.html">Contact us</li>
				</ul>
			</div>
			<!--end nav-->
		</div>
		<!--end header-->
		<div id="myCarousel" class="carousel slide" data-ride="carousel">
			<!--carasel start-->
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
				<li data-target="#myCarousel" data-slide-to="3"></li>
				<li data-target="#myCarousel" data-slide-to="4"></li>
			</ol>
			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<!--start carosel inner-->
				<div class="item active">
					<img src="../task/photo/h.jpg" alt="Home">
					<div class="carousel-caption">
						<h3>Home</h3>
					</div>
				</div>

				<div class="item">
					<img src="../task/photo/as.jpg" alt="About us">
					<div class="carousel-caption">
						<h3>About us</h3>
					</div>
				</div>

				<div class="item">
					<img src="../task/photo/s.jpg" alt="Services">
					<div class="carousel-caption">
						<h3>Services</h3>
					</div>
				</div>
				<div class="item">
					<img src="../task/photo/p.jpg" alt="Products">
					<div class="carousel-caption">
						<h3>products</h3>
					</div>
				</div>
				<div class="item">
					<img src="../task/photo/c.jpg" alt="Contact us">
					<div class="carousel-caption">
						<h3>Contact us</h3>
					</div>
				</div>
			</div>
			<!--carosel inner end-->

			<!-- Left and right controls -->
			<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<!--end carosel-->
		<div class="container-fluid text-center bg-grey">
			<!--boxes-->
			<div class="row text-center">
				<div class="col-sm-4">
					<div class="thumbnail">
						<img src="D:\task\photo\i.jpg" alt="Innovation">
						<p> <strong>Innovation</strong>
						</p>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="thumbnail">
						<img src="D:\task\photo\cr.png" alt="Creative">
						<p> <strong>Creativity</strong>
						</p>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="thumbnail">
						<img src="D:\task\photo\po.jpg" alt="Positive">
						<p>
							<strong>Positivity</strong>
						</p>
					</div>
				</div>
			</div>
			<!--end boxes-->
			<div id="con">
				<!--start con-->
				<div class="contact">
					<!-- start contact-->
					<h1>Address</h1>
					<p>
						<span class="glyphicon glyphicon-map-marker"></span>
						Abc private limited no54,2ndstreet, madipakkam, chennai-67.
					</p>
					<p>
						<span class="glyphicon glyphicon-envelope"></span>
						ABCPVT@gmail.com
					</p>
				</div>
				<!--end contact-->
				<div class="enquiry">
					<!--start enquiry-->
					<h1>Enquiry Form</h1>
					<table border="0" align="center">
						<form name="form" action="email.php" id="form" method="post">
							<tr>
								<tr>
									<td>Name</td>
									<td><input name="name" placeholder="Name" type="text" value=""></td>
								</tr>
								<<tr>
									<td>Email</td>
									<td><input name="email" placeholder="Email" type="text" value=""></td>
								</tr>
								<tr>
									<td>Phone</td>
									<td><input name="phone" placeholder="phonenumber" type="text" value=""></td>
								</tr>
								<tr>
									<td>Message</td>
									<td><textarea name="msg" placeholder="Type your text here..."></textarea>
									</td>
								</tr>
								<td colspan="2" style="text-align:center"><input id="send" name="submit" type="submit" value="Submit"></td>
							</tr>
						</form>
					</table>
				</div>
				<!--end enquiry-->
			</div>
			<!--end con-->
			<div id="footer">
				<!--start footer-->
				copyrights &copy; to WWW.abcpvt.com
				<img src="../task/photo/fb.png" alt="fb" />
				<img src="../task/photo/ln.png" alt="tweet" />
				<img src="../task/photo/tw.png" alt="linkedin" />
			</div>
			<!--end footer-->
		</div>
		<!--end wrapper-->
	</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

您需要将它放入您使用引导程序的列结构中，您使用的引导程序框架是完全响应的，请参阅http://getbootstrap.com并查看它们的内容

答案 1 :(得分：0)

这样做，

添加以下css元素：

#footer{
    position:relative;
}

答案 2 :(得分：0)

您正在使用引导程序，但您没有使用它附带的类。您不需要那么多css，您仍然可以立即拥有响应式网页。请按照本教程的bootstrap：http://www.w3schools.com/bootstrap/

进行操作

希望这有帮助，

由于

答案 3 :(得分：0)

我认为您padding: 50px 0标记所需要的只是body。如果您正在寻找不同的东西，请告诉我。

＆＃13;
＆＃13; 
body {
  margin: 0px;
  padding: 50px 0;
}

#wrapper {
  width: 100%;
  height: auto;
  margin: 0px;
  background-color: orange;
}

#header,
#footer {
  width: 100%;
  height: 50px;
  position: fixed;
  background-color: black;
  right: 0px;
  z-index: 100;
}

#header {
  top: 0;
}

#footer {
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  color: white;
  clear: both;
}

#footer img {
  float: right;
  margin: 5px;
  padding: 5px;
}

#navbar {
  height: 60px;
  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: 3px solid red;
  padding: 19px;
}

.active {
  background-color: gray;
}

#myCarousel {
  background-color: white;
  height: 370px;
  width: 100%;
  float: left;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  width: 70%;
  height: 15%;
  margin: auto;
  background-color: white;
}

.thumbnail {
  height: 300px;
  width: 300px;
  padding: 25px auto;
  margin: 5px;
}

#con {
  width: 100%;
  height: 300px;
}

.contact {
  width: 60%;
  height: 300px;
  background-color: grey;
  padding: 100px 25px;
  float: left;
}

.enquiry {
  width: 40%;
  height: 300px;
  background-color: seagreen;
  float: left;
  padding-left: 5px;
}

input[type=text]:focus {
  border: 3px solid red;
}

input[type="text"] {
  margin: 0 0 15px 0;
}
＆＃13; 
<html>

<head>
	<title>student</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="HandheldFriendly" content="true">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
	<div id="wrapper">
		<!--start wrapper-->
		<div id="header">
			<!--start header-->
			<div class="navbar">
				<!--start nav-->
				<ul>
					<li><a class="active" href="home.html">Home</li>
					<li><a href="about.html">About us</li>
					<li><a href="services.html">Services</li>
					<li><a href="products.html">Products</li>
					<li><a href="contact.html">Contact us</li>
				</ul>
			</div>
			<!--end nav-->
		</div>
		<!--end header-->
		<div id="myCarousel" class="carousel slide" data-ride="carousel">
			<!--carasel start-->
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
				<li data-target="#myCarousel" data-slide-to="3"></li>
				<li data-target="#myCarousel" data-slide-to="4"></li>
			</ol>
			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<!--start carosel inner-->
				<div class="item active">
					<img src="../task/photo/h.jpg" alt="Home">
					<div class="carousel-caption">
						<h3>Home</h3>
					</div>
				</div>

				<div class="item">
					<img src="../task/photo/as.jpg" alt="About us">
					<div class="carousel-caption">
						<h3>About us</h3>
					</div>
				</div>

				<div class="item">
					<img src="../task/photo/s.jpg" alt="Services">
					<div class="carousel-caption">
						<h3>Services</h3>
					</div>
				</div>
				<div class="item">
					<img src="../task/photo/p.jpg" alt="Products">
					<div class="carousel-caption">
						<h3>products</h3>
					</div>
				</div>
				<div class="item">
					<img src="../task/photo/c.jpg" alt="Contact us">
					<div class="carousel-caption">
						<h3>Contact us</h3>
					</div>
				</div>
			</div>
			<!--carosel inner end-->

			<!-- Left and right controls -->
			<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<!--end carosel-->
		<div class="container-fluid text-center bg-grey">
			<!--boxes-->
			<div class="row text-center">
				<div class="col-sm-4">
					<div class="thumbnail">
						<img src="D:\task\photo\i.jpg" alt="Innovation">
						<p> <strong>Innovation</strong>
						</p>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="thumbnail">
						<img src="D:\task\photo\cr.png" alt="Creative">
						<p> <strong>Creativity</strong>
						</p>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="thumbnail">
						<img src="D:\task\photo\po.jpg" alt="Positive">
						<p>
							<strong>Positivity</strong>
						</p>
					</div>
				</div>
			</div>
			<!--end boxes-->
			<div id="con">
				<!--start con-->
				<div class="contact">
					<!-- start contact-->
					<h1>Address</h1>
					<p>
						<span class="glyphicon glyphicon-map-marker"></span>
						Abc private limited no54,2ndstreet, madipakkam, chennai-67.
					</p>
					<p>
						<span class="glyphicon glyphicon-envelope"></span>
						ABCPVT@gmail.com
					</p>
				</div>
				<!--end contact-->
				<div class="enquiry">
					<!--start enquiry-->
					<h1>Enquiry Form</h1>
					<table border="0" align="center">
						<form name="form" action="email.php" id="form" method="post">
							<tr>
								<tr>
									<td>Name</td>
									<td><input name="name" placeholder="Name" type="text" value=""></td>
								</tr>
								<<tr>
									<td>Email</td>
									<td><input name="email" placeholder="Email" type="text" value=""></td>
								</tr>
								<tr>
									<td>Phone</td>
									<td><input name="phone" placeholder="phonenumber" type="text" value=""></td>
								</tr>
								<tr>
									<td>Message</td>
									<td><textarea name="msg" placeholder="Type your text here..."></textarea>
									</td>
								</tr>
								<td colspan="2" style="text-align:center"><input id="send" name="submit" type="submit" value="Submit"></td>
							</tr>
						</form>
					</table>
				</div>
				<!--end enquiry-->
			</div>
			<!--end con-->
			<div id="footer">
				<!--start footer-->
				copyrights &copy; to WWW.abcpvt.com
				<img src="../task/photo/fb.png" alt="fb" />
				<img src="../task/photo/ln.png" alt="tweet" />
				<img src="../task/photo/tw.png" alt="linkedin" />
			</div>
			<!--end footer-->
		</div>
		<!--end wrapper-->
	</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题