a）在较大的屏幕上，我的页脚下面有一个空白区域，看起来不是由于边距或填充，我想知道如何制作它，无论屏幕大小如何，页脚总是会拥抱屏幕的底部，但也不会隐藏它背后的任何文字。
b）屏幕右侧有一个空白区域似乎也不是填充物或边距，一直试图找出它是什么，还没有能够识别它在开发工具中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Legislature App | Brandon Sun</title>
<meta name="description" content="Brandon Sun's new leglislature app.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="assets/img/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="assets/img/icons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/img/icons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/img/icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/icons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/img/icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/img/icons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/img/icons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/img/icons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/icons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="assets/img/icons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="assets/img/icons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="assets/img/icons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="assets/img/icons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="assets/img/icons/manifest.json">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="assets/img/icons/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="assets/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300|Roboto+Slab:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<main>
<!-- Introduction to the legislature app -->
<section class="intro clearfix">
<div class="thin">
</div><!-- /.thin -->
<h1>How well are you represented in the Manitoba legislature?</h1>
<p class="teaser">With Manitobans heading to the polls in 2016, now is your chance to discover how many members of the legislature actually represent you. With a highlighted racial divide in the province, diversity among representatives is more important now than ever. <a href="#selection"><strong>Select the categories below to find yourself in the new Manitoba legislature.</strong></a></p>
</section>
<!-- Three options readers can click -->
<section class="interactive clearfix">
<section class="selection" id="selection">
<div class="gender">
<p class="category">Gender</p>
<div class="options">
<input type="radio" id="Male" class="button rect G1" name="gender"></input>
<label for="Male">Male</label>
<input type="radio" id="Female" class="button rect G1" name="gender"></input>
<label for="Female">Female</label>
</div><!-- /.options -->
</div><!-- /.gender -->
<div>
<p class="category">Age</p>
<div class="options">
<input class="age" type="radio" id="a35" class="button rect A1" name="age" value="35"></input>
<label for="a35">Under 35</label>
<input class="age" type="radio" id="a36" class="button rect A2" name="age" value="36"></input>
<label for="a36">36-64</label>
<input class="age" type="radio" id="a37" class="button rect A3" name="age" value="65"></input>
<label for="a37">65+</label>
</div><!-- /.options -->
</div><!-- /.age -->
<div class="ethnicity">
<p class="category">Ethnicity<span>*<span></p>
<div class="options">
<input type="checkbox" name="ethnicity" id="White" class="button rect E1" ></input>
<label for="White">White</label>
<input type="checkbox" name="ethnicity" id="Black" class="button rect E2" ></input>
<label for="Black">Black</label>
<input type="checkbox" name="ethnicity" id="Aboriginal" class="button rect E3" ></input>
<label for="Aboriginal">Aboriginal</label>
<input type="checkbox" name="ethnicity" id="Metis" class="button rect E4" ></input>
<label for="Metis">Metis</label>
<input type="checkbox" name="ethnicity" id="Asian" class="button rect E5" ></input>
<label for="Asian">Asian</label>
</div><!-- /.options -->
</div><!-- /.ethnicity -->
</section>
<figure class="chart">
<div class="tooltip">
<div class="info">
<p class="tooltipName"></p>
<p class="tooltipParty"></p> <p class="tooltipConstuency"></p>
<p class="tooltipEthnicity"></p> <p class="tooltipAge"></p>
</div><!-- /.info -->
</div><!-- /.tooltip -->
<div class="columns">
</div><!-- /.columns -->
</figure>
<section class="others">
<h2>There are <span class="number" id="count">56</span> MLAs that fit in your demographic</h2>
<figcaption class="special">(Does not include the single vacant seat for the Pas or the Speaker.)</figcaption>
<div class="resetContainer">
<button id="reset">Try again</button>
</div><!-- /.reset -->
</section>
</section><!-- /.interactive -->
</main>
<div class="homescreen">
<p class="install">Click to
<span class="addContainer">
<svg class="addIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="5.0 -10.0 100.0 135.0" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px">
<path id="Share" d="M80.3,33.5V95H18.8V33.5h22.9l0,5.4H24.2v50.7h50.6V38.9H58.9l0-5.4H80.3z M34.7,25.8l12.9-12.9v46 c0,1.4,1.2,2.6,2.6,2.6c1.4,0,2.6-1.2,2.6-2.6v-46l12.9,12.9c0.8,0.8,2.2,0.8,3.1,0c0.8-0.8,0.8-2.2,0-3.1L51.6,5.6 c-0.8-0.8-2-0.8-2.7,0L31.6,22.8c-0.8,0.8-0.8,2.2,0,3.1C32.5,26.7,33.9,26.7,34.7,25.8z"/>
<text x="0.0" y="117.5" font-size="5.0" font-weight="bold" font-family="Helvetica Neue, Helvetica, Arial-Unicode, Arial, Sans-serif" fill="#000000">Created by Tom Walsh</text><text x="0.0" y="122.5" font-size="5.0" font-weight="bold" font-family="Helvetica Neue, Helvetica, Arial-Unicode, Arial, Sans-serif" fill="#000000">from the Noun Project</text></svg>
</span> install our Legislature App on your phone</p>
<p class="add">Then, tap the button <span class="plusContainer">
<svg class="plusIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Слой_1" x="0px" y="0px" width="100px" height="100px" viewBox="5.0 -10.0 100.0 135.0" enable-background="new 0 0 100 100" xml:space="preserve">
<path d="M70,17.5H30c-6.893,0-12.5,5.607-12.5,12.5v40c0,6.893,5.607,12.5,12.5,12.5h40c6.893,0,12.5-5.607,12.5-12.5V30 C82.5,23.107,76.893,17.5,70,17.5z M77.5,70c0,4.136-3.364,7.5-7.5,7.5H30c-4.136,0-7.5-3.364-7.5-7.5V30c0-4.136,3.364-7.5,7.5-7.5 h40c4.136,0,7.5,3.364,7.5,7.5V70z"/>
<path d="M67.5,47.5h-15v-15c0-1.381-1.119-2.5-2.5-2.5s-2.5,1.119-2.5,2.5v15h-15c-1.381,0-2.5,1.119-2.5,2.5s1.119,2.5,2.5,2.5h15 v15c0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5v-15h15c1.381,0,2.5-1.119,2.5-2.5S68.881,47.5,67.5,47.5z"/>
<text x="0.0" y="117.5" font-size="5.0" font-weight="bold" font-family="Helvetica Neue, Helvetica, Arial-Unicode, Arial, Sans-serif" fill="#000000">Created by Arthur Shlain</text><text x="0.0" y="122.5" font-size="5.0" font-weight="bold" font-family="Helvetica Neue, Helvetica, Arial-Unicode, Arial, Sans-serif" fill="#000000">from the Noun Project</text></svg>
</span> to "Add to Homescreen"</p>
</div><!-- /.homescreen -->
<footer>
<img src="assets/img/branding/logo.png" alt="" class="logo">
<p class="new">Thanks for checking out the Brandon Sun's new legislature app. <span class="think">Let us know what you think.</span></p>
<!-- <p class="credits">Created by Graeme Bruce and Andrew Nguyen</p> -->
<a href="https://docs.google.com/forms/d/1PiAW8Jx8lncnDfmua-D0aSJNkHsOhob9ffLI7BUcaP0/viewform?usp=send_form" target="_blank"><p class="feedback">Give us feedback</p></a>
<div class="crossContainer">
<svg class="cross" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="5.0 -10.0 100.0 135.0" enable-background="new 0 0 100 100" xml:space="preserve">
<path d="M52.828,50l28.586-28.586c0.781-0.781,0.781-2.047,0-2.828c-0.78-0.781-2.048-0.781-2.828,0L50,47.172L21.414,18.586 c-0.78-0.781-2.048-0.781-2.828,0c-0.781,0.781-0.781,2.047,0,2.828L47.172,50L18.586,78.586c-0.781,0.781-0.781,2.047,0,2.828 C18.976,81.805,19.488,82,20,82s1.024-0.195,1.414-0.586L50,52.828l28.586,28.586C78.976,81.805,79.488,82,80,82 s1.024-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828L52.828,50z"/>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
</html>
/*----------------------------------
FOOTER
----------------------------------*/
footer {
background: $yellow;
padding-bottom: 0.75%;
// margin-top: 20px;
// clear: both;
}
.logo {
width: 150px;
height: 30px;
padding: 0px 12px 0px 10px;
position: relative;
top: 5px;
left: 5px;
}
/* Portrait tablet and small desktops */
@media (max-width: 940px) {
}
/* Landscape phone to portrait tablet */
@media (max-width: 680px) {
.logo {
position: relative;
top: 10px;
left: 10px;
}
}
/* Landscape phones and down */
@media (max-width: 415px) {
.logo {
position: relative;
top: 12px;
left: 5px;
}
}
.new, .credits {
@include serifLight;
font-size: 1.4rem;
display: inline;
}
/* Portrait tablet and small desktops */
@media (max-width: 940px) {
}
/* Landscape phone to portrait tablet */
@media (max-width: 680px) {
.new {
display: none;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
.new {
display: none;
}
}
.feedbackContainer {
display: inline;
}
.feedback {
@include sansLightBlack;
font-size: 1.2rem;
border: 1px solid $black;
border-radius: 3px;
letter-spacing: 0.25px;
padding: 5px;
margin-left: 15px;
width: 6%;
display: inline-block;
position: relative;
top: 3px;
}
/* Portrait tablet and small desktops */
@media (max-width: 1200px) {
.feedback {
width: 6.5%;
}
}
/* Portrait tablet and small desktops */
@media (max-width: 1100px) {
.feedback {
width: 7%;
}
}
/* Portrait tablet and small desktops */
@media (max-width: 1000px) {
.feedback {
width: 7.5%;
}
}
/* Portrait tablet and small desktops */
@media (max-width: 917px) {
.feedback {
width: 11.5%;
}
}
/* Portrait tablet and small desktops */
@media (max-width: 885px) {
.feedback {
width: 9.5%;
}
}
/* Portrait tablet and small desktops */
@media (max-width: 870px) {
.feedback {
width: 8.5%;
}
}
/* Portrait tablet and small desktops */
@media (max-width: 855px) {
.feedback {
width: 7.5%;
}
}
/* Portrait tablet and small desktops */
@media (max-width: 845px) {
.feedback {
width: 12.5%;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 680px) {
.feedback {
width: 55%;
padding: 18px;
}
}
/* Landscape phones and down */
@media (max-width: 415px) {
.feedback {
width: 54%;
padding: 20px;
}
}
/* Landscape phones and down */
@media (max-width: 415px) {
.feedback {
width: 52%;
padding: 18px;
}
}
/* Landscape phones and down */
@media (max-width: 375px) {
.feedback {
width: 50%;
padding: 18px;
}
}
/* Landscape phones and down */
@media (max-width: 350px) {
.feedback {
width: 46%;
padding: 18px;
}
}
/* Landscape phones and down */
@media (max-width: 320px) {
.feedback {
width: 45%;
padding: 18px;
}
}
.crossContainer {
float: right;
&:hover {
cursor: pointer;
}
}
.cross {
width: 30px;
height: 30px;
border: 1px solid $black;
border-radius: 50%;
fill: $black;
margin: 20px;
padding: 2px 0px 0px 2px;
}
/* Portrait tablet and small desktops */
@media (max-width: 917px) {
.cross {
display: none;
}
}
span.think {
color: $black;
}
/* Portrait tablet and small desktops */
@media (max-width: 845px) {
span.think {
display: none;
}
}
答案 0 :(得分：1)
尝试将此添加到您的页脚CSS
position: absolute;
bottom: 0px;
答案 1 :(得分：0)
您是否已将身体边距设置为0，因为它不在您的css代码中。标准webkit（chrome）正文的边距为8px
body {
margin-bottom: 0px;
}
答案 2 :(得分：0)
对于您的页脚，您需要添加：
footer {
position: fixed; /* position: absolute puts to bottom, but moves on scroll */
bottom: 0;
width: 100%; /* if not already appearing 100% */
}
我也看到您尝试使用//在footer.scss中的页脚声明的第7行和第8行评论一些样式。您应该使用/*和而是*/。
如果您希望页脚始终位于底部，您可能需要将与页脚相同高度的底部填充添加到正文标记或页面的父容器中。这样底部页脚就不会掩盖任何进入页面底部的内容。并确保您记得将box-sizing: border-box;添加到您添加底部填充的父级。
关于您所指的间距问题，我没有assets/css/style.css可供我处理。但是在footer.css中，当我添加：
body {
margin: 0; padding: 0;
}
我没有看到任何间距问题。
这是我对你的设置做的一个小提琴，它也显示了粘性页脚：http://jsfiddle.net/bpzco76j/