如何删除粘性页脚下方的 space？
How do I remove the space below my Sticky Footer?
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
position: relative;
min-height: 100%;
line-height: 1.4;
font-size: 18px;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
.redText {
color: #b6503c
}
.footerBack {
height: 1em;
}
body {
margin: 0 0 5.5em;
font-size: 100%;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.02, #E2DFD7),
color-stop(1, #F4F2EE)
);
background-image: -o-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
background-image: -moz-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
background-image: -webkit-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
background-image: -ms-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
background-image: linear-gradient(to bottom, #E2DFD7 2%, #F4F2EE 100%);
}
#wrapper {
margin: 0 auto;
padding-bottom: 0px;
/* max-width: 1280px;
max-height: 960px;
width: 53.333em;
height: 71.111em; */
}
#logo {
margin: 1em 1em -1em 1.5em;
z-index: 2;
}
#hook {
display: inline;
clear: both;
position: absolute;
top: 125px;
letter-spacing: .05em;
}
#socialIcon1, #socialIcon2, #socialIcon3 {
margin-top: -1em;
}
/* Spacing between social media icons created via padding in the below .button float css */
#iAm {
font-family: Vivaldi, "Brush Script MT", "Giddyup Std", "Myriad Pro", Garamond;
font-size: 1.5em;
}
#carousel {
background-color: #433d32;
/* height: 16.667em; */
height: 58.823529%;
margin: auto 0;
padding: 10px;
}
#bio {
/* height: 11.667em; */
height: 41.117647%;
padding: 0 3em 0 3em;
margin: auto 0;
}
#bioText {
margin: 1em;
width: 70%;
}
#social {
background-color: #a29d92;
}
#portrait {
float: right;
margin: 0 1em 0 1em;
}
h1 {
font-family: "Century Gothic", Muli:300, "Century", "Calibri", "Courier New", Courier, monospace;
font-size: 1.5em;
color: #433d32;
text-align: center;
margin: auto 0;
}
p {
font-family: "Bell MT", Sylfaen, "Baskerville Old Face", Garamond;
font-size: 1em;
color: #433d32;
padding: 0;
}
a {
color: #b6503c;
text-decoration: underline;
}
/*
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
header {
height: 9em; /*11.111em;
margin: auto 0;
}*/
aside {
text-align: center;
background: #a29d92;
position: absolute;
top: 0;
right: 1em;
height: 4em;
width: 25%;
padding: 0em .5em .5em .5em;
margin: auto 0;
clear: both;
font-size: .9em;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
main {
clear: both;
height: 100%;
/*max-height: 18.333em;*/n
/*margin: auto 0 20px 0;*/
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
clear: both;
text-align: center;
}
footer p {
color: #433d32;
margin-bottom: 0;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Float Shadow Effect
========================================================================== */
.button {
margin: 0em;
padding-left: 2.5em;
padding-right: 2.5em;
cursor: pointer;
background: none;
text-decoration: none;
color: none;
/* Prevent highlight colour when element is tapped */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* SHADOW/GLOW TRANSITIONS */
/* Float Shadow */
.float-shadow {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
}
.float-shadow:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
/* move the element up by 5px */
}
.float-shadow:hover:before {
opacity: 1;
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
/*@media only screen and (min-height: 850px) {
#bio {
background: blue;
padding: 3% 3em 3% 3em;
margin: auto 0;
}
#carousel {
background: red;
height: 58.823529%;
padding: 100px;
margin: auto 0;
}
}
@media only screen and (max-width: 944px) {
#social {
background: red;
}
}*/
/* @media screen and (max-width: 944px) {
#fbContainer {
margin: auto 0 0 40px;
width: 80%;
display: block;
}
.social-links img {
margin: -10px auto -10px -50px;
}
.fb-page {
margin-top: 25px;
}
}
*/
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Risa Lee ~ Web Design Portfolio</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- <link rel="stylesheet" media="screen and (max-width: 501px)" href="css/main_mobile.css" />-->
<link href='http://fonts.googleapis.com/css?family=Muli:300' rel='stylesheet' type='text/css'>
<!--Start Royal Carousel-->
<link rel="stylesheet" type="text/css" href="load/skin_modern_silver.css"/>
<link rel="stylesheet" type="text/css" href="load/html_content.css"/>
<script type="text/javascript" src="java/FWDRoyal3DCarousel.js"></script>
<script type="text/javascript">
FWDUtils.onReady(function()
{
var carousel = new FWDRoyal3DCarousel({
//required settings
carouselHolderDivId:"myDiv",
carouselDataListDivId:"carouselData",
displayType:"fluidwidth",
autoScale:"yes",
carouselWidth:30,
carouselHeight:225,
skinPath:"load/skin_modern_silver",
//main settings
backgroundColor:"none",
backgroundImagePath:"none",
thumbnailsBackgroundImagePath:"none",
scrollbarBackgroundImagePath:"none",
backgroundRepeat:"none",
showDisplay2DAlways:"no",
carouselStartPosition:"center",
numberOfThumbnailsToDisplayLeftAndRight:4,
slideshowDelay:5000,
autoplay:"no",
showPrevButton:"yes",
showNextButton:"yes",
showSlideshowButton:"yes",
disableNextAndPrevButtonsOnMobile:"yes",
controlsMaxWidth:940,
slideshowTimerColor:"#777777",
showContextMenu:"no",
addKeyboardSupport:"yes",
//thumbnail settings
thumbnailWidth:400,
thumbnailHeight:250,
thumbnailSpaceOffset3D:70,
thumbnailSpaceOffset2D:70,
thumbnailBorderSize:10,
thumbnailBackgroundColor:"#666666",
thumbnailBorderColor1:"#fcfdfd",
thumbnailBorderColor2:"#e4e4e4",
transparentImages:"no",
maxNumberOfThumbnailsOnMobile:13,
showThumbnailsGradient:"yes",
showThumbnailsHtmlContent:"no",
enableHtmlContent:"no",
textBackgroundColor:"#333333",
textBackgroundOpacity:.7,
showText:"yes",
showTextBackgroundImage:"yes",
showThumbnailBoxShadow:"yes",
thumbnailBoxShadowCss:"0px 2px 2px #555555",
showReflection:"yes",
reflectionHeight:60,
reflectionDistance:0,
reflectionOpacity:.2,
//scrollbar settings
showScrollbar:"no",
disableScrollbarOnMobile:"no",
enableMouseWheelScroll:"yes",
scrollbarHandlerWidth:300,
scrollbarTextColorNormal:"#777777",
scrollbarTextColorSelected:"#000000",
//combobox settings
showComboBox:"no",
startAtCategory:1,
selectLabel:"SELECT CATEGORIES",
allCategoriesLabel:"All Categories",
showAllCategories:"no",
comboBoxPosition:"topright",
selectorBackgroundNormalColor1:"#fcfdfd",
selectorBackgroundNormalColor2:"#e4e4e4",
selectorBackgroundSelectedColor1:"#a7a7a7",
selectorBackgroundSelectedColor2:"#8e8e8e",
selectorTextNormalColor:"#8b8b8b",
selectorTextSelectedColor:"#FFFFFF",
buttonBackgroundNormalColor1:"#e7e7e7",
buttonBackgroundNormalColor2:"#e7e7e7",
buttonBackgroundSelectedColor1:"#a7a7a7",
buttonBackgroundSelectedColor2:"#8e8e8e",
buttonTextNormalColor:"#000000",
buttonTextSelectedColor:"#FFFFFF",
comboBoxShadowColor:"#000000",
comboBoxHorizontalMargins:12,
comboBoxVerticalMargins:12,
comboBoxCornerRadius:0,
//lightbox settings
addLightBoxKeyboardSupport:"yes",
showLightBoxNextAndPrevButtons:"yes",
showLightBoxZoomButton:"yes",
showLightBoxInfoButton:"yes",
showLighBoxSlideShowButton:"yes",
showLightBoxInfoWindowByDefault:"no",
slideShowAutoPlay:"no",
lightBoxVideoAutoPlay:"no",
lightBoxBackgroundColor:"#000000",
lightBoxInfoWindowBackgroundColor:"#FFFFFF",
lightBoxItemBorderColor1:"#fcfdfd",
lightBoxItemBorderColor2:"#e4FFe4",
lightBoxItemBackgroundColor:"#333333",
lightBoxMainBackgroundOpacity:.8,
lightBoxInfoWindowBackgroundOpacity:.9,
lightBoxBorderSize:5,
lightBoxBorderRadius:0,
lightBoxSlideShowDelay:4
});
})
</script>
<!-- End Royal Carousel-->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="wrapper">
<header>
<a href="index.html"><img src="img/signature_logo_final2.png" alt="RisaLogo" id="logo"/></a>
<aside>
<p><span class="redText"><strong>@</strong></span> Email me:
<a href="mailto: risa_lee@hotmail.com">Risa_Lee@hotmail.com</a><br>
<a href="http://www.linkedin.com/in/risalee" alt="LinkedInLink"><img src="img/48x48-Square-82-LI.png" alt="LinkInIcon" target="_new" width="18px" height="18px" /> View my Resume</a></p>
</aside>
<h1 id="hook">I love <span class="redText">Web Design</span> and <span class="redText">Front End Developement</span>.</h1>
<!-- DELETE ME
<p>Header logo is 298 x 189 signature_logo_final</p>
<p>
200 - Header - 40 .25 25%
300 - Carousel - 26.66667 .2249 37.5%
210 - About 38 .4210 26.25%
90 - Footer 33 .48484 11.25%</p>
-->
</header>
<main>
<div id="carousel">
<div id="myDiv">
</div>
<div id="carouselData" style="display: none;">
<!-- category -->
<ul data-cat="Category one">
<ul>
<li data-type="media" data-url="load/images/1.jpg"></li>
<li data-thumbnail-path="load/thumbnails/1.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Megalith Online</p>
<p class="smallLabel">This site is sadly no longer live (mainly because it's a half a decade old), however, it was designed employing Flash - back when that was the animation standard.</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Megalith Online</p>
<p class="mediaDescriptionText">This site is sadly no longer live (mainly because it's a half a decade old), however, it was designed employing Flash - back when that was the animation standard.</p>
</li>
</ul>
<ul>
<li data-type="media" data-url="load/images/5.jpg"></li>
<li data-thumbnail-path="load/thumbnails/5.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Student Orientation Design</p>
<p class="smallLabel">Designed for a University, this project required a simple layout that would accomodate their existing color scheme (gray, beige, red and orange) while still looking clean and clutter-free. Complete with an original logo, the design displays excellently on smaller devices thanks to the use Responsive Design principles.</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Student Orientation Design</p>
<p class="mediaDescriptionText">Designed for a University, this project required a simple layout that would accomodate their existing color scheme (gray, beige, red and orange) while still looking clean and clutter-free. Complete with an original logo, the design displays excellently on smaller devices thanks to the use Responsive Design principles.</p>
</li>
</ul>
<ul>
<li data-type="iframe" data-width="800" data-height="550" data-url="load/images/StartHereInfoGraphic_Final.html"></li>
<li data-thumbnail-path="load/thumbnails/6.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Interactive Infographic</p>
<p class="smallLabel">Designed for a University, this graphic replaced a text heavy document with an immersive learning element. The layout for this project was completed using Piktochart, with the interactive elements hand coded to add a little "whizz bang".</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Interactive Infographic</p>
<p class="mediaDescriptionText">Designed for a University, this graphic replaced a text heavy document with an immersive learning element. The layout for this project was completed using Piktochart, with the interactive elements hand coded to add a little "whizz bang".</p>
</li>
</ul>
<ul>
<li data-type="media" data-width="640" data-height="420" data-url="load/images/3.jpg"></li>
<li data-thumbnail-path="load/thumbnails/3.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Creative Portrait</p>
<p class="smallLabel">Created to showcase the then new CSS3 features, this old Portfolio site is no longer live. In it's heyday, it utilized Spry Tabs and a Fluid Layout to allow the foreground elements to float above the background content.</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Creative Portrait</p>
<p class="mediaDescriptionText">Created to showcase the then new CSS3 features, this old Portfolio site is no longer live. In it's heyday, it utilized Spry Tabs and a Fluid Layout to allow the foreground elements to float above the background content.</p>
</li>
</ul>
<ul>
<li data-type="iframe" data-width="800" data-height="550" data-url="load/images/dynamicCharts/dynamicTable.html"></li>
<li data-thumbnail-path="load/thumbnails/4.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Dynamic Chart</p>
<p class="smallLabel">This mockup was created for a University that sought implementation of Highcharts' interactive features within their course template. Information displayed is shown only as an example.</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Dynamic Chart</p>
<p class="mediaDescriptionText">This mockup was created for a University that sought implementation of Highcharts' interactive features within their course template. Information displayed is shown only as an example.</p>
</li>
</ul>
</ul>
<!-- end -->
</div>
</div>
<div id="bio">
<img src="img/risa_portrait.jpg" alt="RisaPortrait" id="portrait" />
<div id="bioText">
<p><span class="redText" id="iAm">I</span> am a Denver, CO native who designs and builds beautiful sites with clean, responsive code for computer screens, tablets, mobiles and more.</p>
<p>With over 6 years of experience in the web industry, I have worked with companies like Verizon, CSUGlobal and Pearson eCollege. I work primarily with the Adobe Suite and use cutting edge technologies including <strong>HTML5</strong>, <strong>CSS3</strong> and <strong>JavaScript</strong> to produce accessible sites. I’m passionate about anything computer, art or design related and am an avid video gamer.</p>
<p>What are you wating for? <a href="mailto: risa_lee@hotmail.com"><strong>Contact Me</strong></a>!</p>
</div>
</div>
</main>
<footer>
<div id="social">
<a href="https://plus.google.com/+RisaLee/posts" alt="GooglePlusLink" rel="float-shadow" class="button float-shadow"><img src="img/48x48-Square-82-GP.png" alt="GooglePlusIcon" target="_new" id="socialIcon1" /></a>
<a href="http://www.linkedin.com/in/risalee" alt="LinkedInLink" rel="float-shadow" class="button float-shadow"><img src="img/48x48-Square-82-LI.png" alt="LinkInIcon" target="_new" id="socialIcon2" /></a>
<a href="http://twitter.com/#!/@RisaLee316" alt="TwitterLink" rel="float-shadow" class="button float-shadow"><img src="img/48x48-Square-82-TW.png" alt="TwitterIcon" target="_new" id="socialIcon3" /></a>
<p>© 2014 Risa Hall, All Rights Reserved.</p>
</div>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<!--
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
-->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
</body>
</html>
我已经阅读了无数文章并为此工作了几个小时，但我就是无法弄清楚space 下方 页脚的来源。我试过在页脚和任何包含 Div 的页脚上声明 0 边距和填充，但这没有用。
在检查模式和 Dreamweaver 中，似乎认为 space 是页脚的一部分，但更改页脚 CSS 却没有任何作用。
有很多支持文件，所以在检查模式下查看我的 HTML 和 main.css 文件可能最简单：http://risalee.com/
请帮忙！
你不应该给你的页脚一个固定的高度，你必须从页脚中的 p 元素中删除边距。这将解决您的问题。
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
clear: both;
text-align: center;
}
footer p {
color: #433d32;
margin-bottom: 0;
}
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
position: relative;
min-height: 100%;
line-height: 1.4;
font-size: 18px;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
.redText {
color: #b6503c
}
.footerBack {
height: 1em;
}
body {
margin: 0 0 5.5em;
font-size: 100%;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.02, #E2DFD7),
color-stop(1, #F4F2EE)
);
background-image: -o-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
background-image: -moz-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
background-image: -webkit-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
background-image: -ms-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
background-image: linear-gradient(to bottom, #E2DFD7 2%, #F4F2EE 100%);
}
#wrapper {
margin: 0 auto;
padding-bottom: 0px;
/* max-width: 1280px;
max-height: 960px;
width: 53.333em;
height: 71.111em; */
}
#logo {
margin: 1em 1em -1em 1.5em;
z-index: 2;
}
#hook {
display: inline;
clear: both;
position: absolute;
top: 125px;
letter-spacing: .05em;
}
#socialIcon1, #socialIcon2, #socialIcon3 {
margin-top: -1em;
}
/* Spacing between social media icons created via padding in the below .button float css */
#iAm {
font-family: Vivaldi, "Brush Script MT", "Giddyup Std", "Myriad Pro", Garamond;
font-size: 1.5em;
}
#carousel {
background-color: #433d32;
/* height: 16.667em; */
height: 58.823529%;
margin: auto 0;
padding: 10px;
}
#bio {
/* height: 11.667em; */
height: 41.117647%;
padding: 0 3em 0 3em;
margin: auto 0;
}
#bioText {
margin: 1em;
width: 70%;
}
#social {
background-color: #a29d92;
}
#portrait {
float: right;
margin: 0 1em 0 1em;
}
h1 {
font-family: "Century Gothic", Muli:300, "Century", "Calibri", "Courier New", Courier, monospace;
font-size: 1.5em;
color: #433d32;
text-align: center;
margin: auto 0;
}
p {
font-family: "Bell MT", Sylfaen, "Baskerville Old Face", Garamond;
font-size: 1em;
color: #433d32;
padding: 0;
}
a {
color: #b6503c;
text-decoration: underline;
}
/*
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
header {
height: 9em; /*11.111em;
margin: auto 0;
}*/
aside {
text-align: center;
background: #a29d92;
position: absolute;
top: 0;
right: 1em;
height: 4em;
width: 25%;
padding: 0em .5em .5em .5em;
margin: auto 0;
clear: both;
font-size: .9em;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
main {
clear: both;
height: 100%;
/*max-height: 18.333em;*/n
/*margin: auto 0 20px 0;*/
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
clear: both;
text-align: center;
}
footer p {
color: #433d32;
margin-bottom: 0;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Float Shadow Effect
========================================================================== */
.button {
margin: 0em;
padding-left: 2.5em;
padding-right: 2.5em;
cursor: pointer;
background: none;
text-decoration: none;
color: none;
/* Prevent highlight colour when element is tapped */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* SHADOW/GLOW TRANSITIONS */
/* Float Shadow */
.float-shadow {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
}
.float-shadow:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
/* move the element up by 5px */
}
.float-shadow:hover:before {
opacity: 1;
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
/*@media only screen and (min-height: 850px) {
#bio {
background: blue;
padding: 3% 3em 3% 3em;
margin: auto 0;
}
#carousel {
background: red;
height: 58.823529%;
padding: 100px;
margin: auto 0;
}
}
@media only screen and (max-width: 944px) {
#social {
background: red;
}
}*/
/* @media screen and (max-width: 944px) {
#fbContainer {
margin: auto 0 0 40px;
width: 80%;
display: block;
}
.social-links img {
margin: -10px auto -10px -50px;
}
.fb-page {
margin-top: 25px;
}
}
*/
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Risa Lee ~ Web Design Portfolio</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- <link rel="stylesheet" media="screen and (max-width: 501px)" href="css/main_mobile.css" />-->
<link href='http://fonts.googleapis.com/css?family=Muli:300' rel='stylesheet' type='text/css'>
<!--Start Royal Carousel-->
<link rel="stylesheet" type="text/css" href="load/skin_modern_silver.css"/>
<link rel="stylesheet" type="text/css" href="load/html_content.css"/>
<script type="text/javascript" src="java/FWDRoyal3DCarousel.js"></script>
<script type="text/javascript">
FWDUtils.onReady(function()
{
var carousel = new FWDRoyal3DCarousel({
//required settings
carouselHolderDivId:"myDiv",
carouselDataListDivId:"carouselData",
displayType:"fluidwidth",
autoScale:"yes",
carouselWidth:30,
carouselHeight:225,
skinPath:"load/skin_modern_silver",
//main settings
backgroundColor:"none",
backgroundImagePath:"none",
thumbnailsBackgroundImagePath:"none",
scrollbarBackgroundImagePath:"none",
backgroundRepeat:"none",
showDisplay2DAlways:"no",
carouselStartPosition:"center",
numberOfThumbnailsToDisplayLeftAndRight:4,
slideshowDelay:5000,
autoplay:"no",
showPrevButton:"yes",
showNextButton:"yes",
showSlideshowButton:"yes",
disableNextAndPrevButtonsOnMobile:"yes",
controlsMaxWidth:940,
slideshowTimerColor:"#777777",
showContextMenu:"no",
addKeyboardSupport:"yes",
//thumbnail settings
thumbnailWidth:400,
thumbnailHeight:250,
thumbnailSpaceOffset3D:70,
thumbnailSpaceOffset2D:70,
thumbnailBorderSize:10,
thumbnailBackgroundColor:"#666666",
thumbnailBorderColor1:"#fcfdfd",
thumbnailBorderColor2:"#e4e4e4",
transparentImages:"no",
maxNumberOfThumbnailsOnMobile:13,
showThumbnailsGradient:"yes",
showThumbnailsHtmlContent:"no",
enableHtmlContent:"no",
textBackgroundColor:"#333333",
textBackgroundOpacity:.7,
showText:"yes",
showTextBackgroundImage:"yes",
showThumbnailBoxShadow:"yes",
thumbnailBoxShadowCss:"0px 2px 2px #555555",
showReflection:"yes",
reflectionHeight:60,
reflectionDistance:0,
reflectionOpacity:.2,
//scrollbar settings
showScrollbar:"no",
disableScrollbarOnMobile:"no",
enableMouseWheelScroll:"yes",
scrollbarHandlerWidth:300,
scrollbarTextColorNormal:"#777777",
scrollbarTextColorSelected:"#000000",
//combobox settings
showComboBox:"no",
startAtCategory:1,
selectLabel:"SELECT CATEGORIES",
allCategoriesLabel:"All Categories",
showAllCategories:"no",
comboBoxPosition:"topright",
selectorBackgroundNormalColor1:"#fcfdfd",
selectorBackgroundNormalColor2:"#e4e4e4",
selectorBackgroundSelectedColor1:"#a7a7a7",
selectorBackgroundSelectedColor2:"#8e8e8e",
selectorTextNormalColor:"#8b8b8b",
selectorTextSelectedColor:"#FFFFFF",
buttonBackgroundNormalColor1:"#e7e7e7",
buttonBackgroundNormalColor2:"#e7e7e7",
buttonBackgroundSelectedColor1:"#a7a7a7",
buttonBackgroundSelectedColor2:"#8e8e8e",
buttonTextNormalColor:"#000000",
buttonTextSelectedColor:"#FFFFFF",
comboBoxShadowColor:"#000000",
comboBoxHorizontalMargins:12,
comboBoxVerticalMargins:12,
comboBoxCornerRadius:0,
//lightbox settings
addLightBoxKeyboardSupport:"yes",
showLightBoxNextAndPrevButtons:"yes",
showLightBoxZoomButton:"yes",
showLightBoxInfoButton:"yes",
showLighBoxSlideShowButton:"yes",
showLightBoxInfoWindowByDefault:"no",
slideShowAutoPlay:"no",
lightBoxVideoAutoPlay:"no",
lightBoxBackgroundColor:"#000000",
lightBoxInfoWindowBackgroundColor:"#FFFFFF",
lightBoxItemBorderColor1:"#fcfdfd",
lightBoxItemBorderColor2:"#e4FFe4",
lightBoxItemBackgroundColor:"#333333",
lightBoxMainBackgroundOpacity:.8,
lightBoxInfoWindowBackgroundOpacity:.9,
lightBoxBorderSize:5,
lightBoxBorderRadius:0,
lightBoxSlideShowDelay:4
});
})
</script>
<!-- End Royal Carousel-->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="wrapper">
<header>
<a href="index.html"><img src="img/signature_logo_final2.png" alt="RisaLogo" id="logo"/></a>
<aside>
<p><span class="redText"><strong>@</strong></span> Email me:
<a href="mailto: risa_lee@hotmail.com">Risa_Lee@hotmail.com</a><br>
<a href="http://www.linkedin.com/in/risalee" alt="LinkedInLink"><img src="img/48x48-Square-82-LI.png" alt="LinkInIcon" target="_new" width="18px" height="18px" /> View my Resume</a></p>
</aside>
<h1 id="hook">I love <span class="redText">Web Design</span> and <span class="redText">Front End Developement</span>.</h1>
<!-- DELETE ME
<p>Header logo is 298 x 189 signature_logo_final</p>
<p>
200 - Header - 40 .25 25%
300 - Carousel - 26.66667 .2249 37.5%
210 - About 38 .4210 26.25%
90 - Footer 33 .48484 11.25%</p>
-->
</header>
<main>
<div id="carousel">
<div id="myDiv">
</div>
<div id="carouselData" style="display: none;">
<!-- category -->
<ul data-cat="Category one">
<ul>
<li data-type="media" data-url="load/images/1.jpg"></li>
<li data-thumbnail-path="load/thumbnails/1.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Megalith Online</p>
<p class="smallLabel">This site is sadly no longer live (mainly because it's a half a decade old), however, it was designed employing Flash - back when that was the animation standard.</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Megalith Online</p>
<p class="mediaDescriptionText">This site is sadly no longer live (mainly because it's a half a decade old), however, it was designed employing Flash - back when that was the animation standard.</p>
</li>
</ul>
<ul>
<li data-type="media" data-url="load/images/5.jpg"></li>
<li data-thumbnail-path="load/thumbnails/5.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Student Orientation Design</p>
<p class="smallLabel">Designed for a University, this project required a simple layout that would accomodate their existing color scheme (gray, beige, red and orange) while still looking clean and clutter-free. Complete with an original logo, the design displays excellently on smaller devices thanks to the use Responsive Design principles.</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Student Orientation Design</p>
<p class="mediaDescriptionText">Designed for a University, this project required a simple layout that would accomodate their existing color scheme (gray, beige, red and orange) while still looking clean and clutter-free. Complete with an original logo, the design displays excellently on smaller devices thanks to the use Responsive Design principles.</p>
</li>
</ul>
<ul>
<li data-type="iframe" data-width="800" data-height="550" data-url="load/images/StartHereInfoGraphic_Final.html"></li>
<li data-thumbnail-path="load/thumbnails/6.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Interactive Infographic</p>
<p class="smallLabel">Designed for a University, this graphic replaced a text heavy document with an immersive learning element. The layout for this project was completed using Piktochart, with the interactive elements hand coded to add a little "whizz bang".</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Interactive Infographic</p>
<p class="mediaDescriptionText">Designed for a University, this graphic replaced a text heavy document with an immersive learning element. The layout for this project was completed using Piktochart, with the interactive elements hand coded to add a little "whizz bang".</p>
</li>
</ul>
<ul>
<li data-type="media" data-width="640" data-height="420" data-url="load/images/3.jpg"></li>
<li data-thumbnail-path="load/thumbnails/3.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Creative Portrait</p>
<p class="smallLabel">Created to showcase the then new CSS3 features, this old Portfolio site is no longer live. In it's heyday, it utilized Spry Tabs and a Fluid Layout to allow the foreground elements to float above the background content.</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Creative Portrait</p>
<p class="mediaDescriptionText">Created to showcase the then new CSS3 features, this old Portfolio site is no longer live. In it's heyday, it utilized Spry Tabs and a Fluid Layout to allow the foreground elements to float above the background content.</p>
</li>
</ul>
<ul>
<li data-type="iframe" data-width="800" data-height="550" data-url="load/images/dynamicCharts/dynamicTable.html"></li>
<li data-thumbnail-path="load/thumbnails/4.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Dynamic Chart</p>
<p class="smallLabel">This mockup was created for a University that sought implementation of Highcharts' interactive features within their course template. Information displayed is shown only as an example.</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Dynamic Chart</p>
<p class="mediaDescriptionText">This mockup was created for a University that sought implementation of Highcharts' interactive features within their course template. Information displayed is shown only as an example.</p>
</li>
</ul>
</ul>
<!-- end -->
</div>
</div>
<div id="bio">
<img src="img/risa_portrait.jpg" alt="RisaPortrait" id="portrait" />
<div id="bioText">
<p><span class="redText" id="iAm">I</span> am a Denver, CO native who designs and builds beautiful sites with clean, responsive code for computer screens, tablets, mobiles and more.</p>
<p>With over 6 years of experience in the web industry, I have worked with companies like Verizon, CSUGlobal and Pearson eCollege. I work primarily with the Adobe Suite and use cutting edge technologies including <strong>HTML5</strong>, <strong>CSS3</strong> and <strong>JavaScript</strong> to produce accessible sites. I’m passionate about anything computer, art or design related and am an avid video gamer.</p>
<p>What are you wating for? <a href="mailto: risa_lee@hotmail.com"><strong>Contact Me</strong></a>!</p>
</div>
</div>
</main>
<footer>
<div id="social">
<a href="https://plus.google.com/+RisaLee/posts" alt="GooglePlusLink" rel="float-shadow" class="button float-shadow"><img src="img/48x48-Square-82-GP.png" alt="GooglePlusIcon" target="_new" id="socialIcon1" /></a>
<a href="http://www.linkedin.com/in/risalee" alt="LinkedInLink" rel="float-shadow" class="button float-shadow"><img src="img/48x48-Square-82-LI.png" alt="LinkInIcon" target="_new" id="socialIcon2" /></a>
<a href="http://twitter.com/#!/@RisaLee316" alt="TwitterLink" rel="float-shadow" class="button float-shadow"><img src="img/48x48-Square-82-TW.png" alt="TwitterIcon" target="_new" id="socialIcon3" /></a>
<p>© 2014 Risa Hall, All Rights Reserved.</p>
</div>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<!--
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
-->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
</body>
</html>
我已经阅读了无数文章并为此工作了几个小时，但我就是无法弄清楚space 下方 页脚的来源。我试过在页脚和任何包含 Div 的页脚上声明 0 边距和填充，但这没有用。
在检查模式和 Dreamweaver 中，似乎认为 space 是页脚的一部分，但更改页脚 CSS 却没有任何作用。
有很多支持文件，所以在检查模式下查看我的 HTML 和 main.css 文件可能最简单：http://risalee.com/
请帮忙！
你不应该给你的页脚一个固定的高度，你必须从页脚中的 p 元素中删除边距。这将解决您的问题。
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
clear: both;
text-align: center;
}
footer p {
color: #433d32;
margin-bottom: 0;
}