我是网站编程的初学者，我有一个我无法解决的问题。我遇到的问题是，当我调整 Google chrome 或任何浏览器的大小时，页脚中的元素不在线，并且在调整大小时某些尺寸的版权消失。我看不出我做错了什么，这是我第一次制作网站。任何帮助，将不胜感激。
下面是代码。请帮忙。
html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Yes ICAN: International Child Advocacy Network</title>
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/responsive.css"/>
<meta name"viewport" content="width=device-width, initial-scaled=1.0">
</head>
<body>
<header>
<img id="header" src="img/header.jpg"/>
<nav>
<ul>
<li><a href="chat.html">Get Help</a></li>
<li><a href="http://community.yesican.org">Community</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="about.html">About YIC</a></li>
<li><a href="supportyic.html">Get Involved</a></li>
</ul>
</nav>
</header>
<img id="banner" src="img/banner.jpg"/>
<!--The main content of the website will go inside of the #wrapper id. It is divided into two sections: #primary & #secondary.-->
<div id="wrapper">
<!-- Two sections have been created for desktop view to have two columns. Mobile website will just be stacked-->
<section id="primary">
<h2>Who We Are</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in elementum velit, venenatis rhoncus lacus. Ut consequat luctus enim, in auctor libero posuere ut. Curabitur vitae aliquet nisi. Etiam condimentum tincidunt venenatis. Fusce vel congue purus. Pellentesque ut eleifend ex. Nunc purus neque, aliquam vitae aliquam quis, accumsan id lacus. Nunc ac scelerisque magna. Etiam purus lorem, rutrum et ornare a, tincidunt non ipsum. Nullam blandit dui venenatis, malesuada felis a, porttitor purus.</p>
<!--Left column content goes here-->
</section>
<section id="secondary">
<h2>Memorial List</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in elementum velit, venenatis rhoncus lacus. Ut consequat luctus enim, in auctor libero posuere ut.</p>
<!--Right column content goes here-->
</section>
</div>
<!--Footer still needs to be completed-->
<footer>
<div id="footerslogan">
<p>BREAK THE <b>SILENCE</b> <br>AND <b>CYCLE</b> OF ABUSE</p>
</div>
<div>
<ul><h3>ABOUT</h3>
<li><a href="">Contact Us</a></li>
<li><a href="">FAQ's</a></li>
<li><a href="">Site Map</a></li>
</ul>
<ul><h3>SUPPORT OUR CAUSE</h3>
<li><a href="">Donate</a></li>
<li><a href="">Volunteer</a></li>
<li><a href="">Fundraising Events</a></li>
</ul>
<ul><h3>FOLLOW US</h3>
<li>
<a href="#Facebook handle here"><img src="img/facebook-icon.png" alt="Facebook Logo" class="social-icon"></a>
<a href="#Instagram handle here"><img src="img/instagram-icon.png" alt="Instagram Logo" class="social-icon"></a>
<a href="#Twitter handle here"><img src="img/twitter-icon.png" alt="Twitter Logo" class="social-icon"/></a>
</li>
</ul>
<!--If we decide to do a copyright on the page Tiff. It is commented it out below.-->
<p id="copyright">Copyright© 2013 International Child Advocacy Network</p>
</div>
</footer>
</body>
</html>
Here is the css code:
/***********************
GENERAL
***********************/
a {
text-decoration:none;
}
img {
max-width: 100%;
}
body {
font-family: 'Fabrica', Arial;
background-color:#e6e9ed;
color: #434a54;
}
#wrapper{
max-width:960px;
margin: 0 auto;
background-color:#f5f7fa;
overflow: auto; /*This fixed the wrapper background color problem that happened bc floating content*/
}
#banner {
margin-left: auto;
margin-right:auto;
padding: 0;
display:block;
clear:both;
}
/***********************
HEADER
***********************/
#header {
margin-left: auto;
margin-right: auto;
padding: 0;
display: block;
clear: both;
font-family: 'Fabrica', Arial;
}
/***********************
NAVIGATION
***********************/
nav{
background:#4a89dc;
text-align:center;
color:blue;
max-width:960px;
margin: 0 auto;
padding: 10px 0;
text-align:center;
font-size:1.2em;
}
nav ul{
list-style:none;
margin:0 10px; /*Can be change later on in the design if it doesn't work*/
}
nav li{
/*Inline, mostly text. Appears in the same line, inline as the rest of the text. Block
pushes other items out of the page. Inline block maintains width and
height but is in line with other images*/
display:inline-block;
list-style:none;
}
nav a{
font-weight: 800;
padding: 15px 10px;
}
nav a:visited, a:link {
color:#f5f7fa;
}
nav a:link {
color:#f5f7fa;
}
nav a:hover {
color:#0B108C;
}
/**********************
FOOTER
**********************/
footer {
max-width:950px;
background-color:#434a54;
font-size:0.75em;
text-align:center;
clear:both; /* The clear property allows the footer to be clear of any floated elements */
color:#e6e9ed;
margin: 0 auto;
padding: 4px;
font-family: 'Fabrica', Arial;
}
footer h3{
padding-left: .9em;
}
footer ul {
display:inline-block;
list-style-type: none;
text-align:left;
}
footer ul li{
list-style:none;
text-decoration:none;
padding-left: 1em;
}
footer ul li a{
color:#e6e9ed;
}
footer a:hover {
color:#FFFFFF; /*Change hover color to make it more prominent*/
}
#footerslogan{
padding-top: .6em;
float:left;
padding-left: 2em;
font-size: 1.35em;
}
#copyright{
font-size: .75em;
text-align:left;
margin-top: 5px;
float:left;
clear:both;
display:inline-block;
}
.social-icon {
/*Everything here is a placeholder for the images*/
display:inline-block;
width:30px;
height:30px;
}
img.social-icon {
border-square: 85%;
margin-bottom: .8em;
margin-right: .9em;
}
最佳答案
首先，我注意到一些打字错误；希望他们只是打字错误。这是更新/更正的部分。您在视口(viewport)之前没有“=”，并且已将“d”添加到初始比例!
<meta name="viewport" content="width=device-width, initial-scale=1.0">我建议您使用 getbootstrap.com 或 jquerymobile.com 来解决许多与您面临的问题类似的问题。
关于html - 具有调整大小问题 css 的页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26953937/