我是网站编程的初学者，我遇到了一个我无法解决的问题。我遇到的问题是，当我重新调整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;
}
答案 0 :(得分：0)
首先，我发现了一些打字错误;希望他们只是错字。这是更新/更正的部分。您在视口之前没有“=”并且已将“d”添加到初始比例！
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我建议您使用getbootstrap.com或jquerymobile.com来解决许多类似于您所遇到的问题。
答案 1 :(得分：0)
我不确定您要做什么，但如果您尝试将版权放在左下角，则可以使用position: absolute作为#copyright，并将父div设置为{ {1}}。我发布了以下代码。
position: relative如果您正在寻找其他内容，请详细说明您想要做的事情。
我还建议使用类似http://jsfiddle.net/的内容并附上您使用的所有文件（例如normalize.css和responsive.css），以便更轻松地查看您的问题。