【发布时间】：2019-05-28 23:10:08
【问题描述】：
当您在移动设备上加载每个页面时，我正在尝试消除每个页面最底部的空白。我找不到该空间的定义位置或删除或减少空间的位置。有可能吗，还是我无能为力？
另外我也想知道我的脚本是否有任何问题？一切似乎都很好，但还是想问。
*** {
box-sizing: border-box;
}
/*@font-face {
font-family: zcool;
src: url(https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou);
}*/
html,
body {
height: 100%;
/* defines the whole view area */
width: 100%;
/* defines the whole view area */
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines the font for the whole webpage */
}
a {
text-decoration: none;
/* removes hyperlink decoration/line */
}
body {
padding: 0;
/* removes padding */
margin: 0;
/* removes margin */
border: 0;
/* removes border */
background-attachment: fixed;
/* fixes the background image */
background-size: 100% auto;
/* defines the size of the background image */
background-image: url("img/bg2.png");
/* defines the source of the background-image */
background-repeat: no-repeat;
/* keeps background image from repeating itself */
background-size: 100% 100%;
/* defines the size of the background image */
text-align: justify;
/* justifies all the text everywhere */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
body {
padding: 0;
/* removes padding */
margin: 0;
/* removes margin */
border: 0;
/* removes border */
background-attachment: fixed;
/* fixes the background image */
background-size: 100% auto;
/* defines the size of the background image */
background-image: url("img/bgm.png");
background-repeat: no-repeat;
/* keeps background image from repeating itself */
background-size: 100% 100%;
/* defines the size of the background image */
text-align: justify;
/* justifies all the text everywhere */
}
}
** .section h1,
h2 {
text-align: center;
/* centers headings inside of div */
/* parent */
}
h1 {
/*desktop*/
/* centers headings inside of div */
/* child */
text-align: center;
margin-left: auto;
margin-right: auto;
}
h2 {
/*desktop*/
/* centers headings inside of div */
/* child */
text-align: center;
margin-left: auto;
margin-right: auto;
text-decoration: underline;
}
code {
/*desktop*/
font-size: 20px;
/* font-size of code */
}
kbd {
/*desktop*/
font-family: "Times New Roman", Times, serif;
/* defines font */
font-size: 20px;
/* defines font size */
}
@media (max-width: 768px) {
/*mobile*/
code {
font-size: 10px;
/* defines font size */
}
}
@media (max-width: 768px) {
/*mobile*/
kbd {
font-family: "Times New Roman", Times, serif;
/* defines font */
font-size: 10px;
/* defines font size */
}
}
ul#horizontal-list {
list-style: none;
/* removes bullet from list */
}
ul#horizontal-list li {
display: inline;
/* ??? */
}
ul {
margin: 0;
/* removes space */
padding: 0;
/* removes space */
overflow: hidden;
/* ??? */
}
li {
float: center;
/* centers the list element */
}
li a {
display: block;
color: white;
/* color op hyperlink */
text-align: center;
/* centers text */
padding: 16px;
/* adds spacing around. good for buttons */
text-decoration: none;
/* removes any hyperlink decoration */
}
li a:hover {
background-color: red;
/* turns the background red when hovering over it with mouse */
}
.navbar {
position: fixed;
/* fixes the nav bar */
top: 0;
/* position where it is fixed */
/*height: 50px;*/
width: 100%;
/* defines width, 100% will always go edge to edge on screens */
background-color: black;
/* background color */
color: white;
/* text color */
text-align: center;
/* centers text */
left: 0;
/* ??? */
right: 0;
/* ??? */
z-index: 1;
/* ??? */
}
.navbar ul {
display: flex;
/* ??? */
align-items: center;
/* centers all the elements/items */
justify-content: center;
/* ??? */
list-style-type: none;
/* removes decoration */
margin-top: 0px;
/* removes spacing on top */
}
.header {
background-image: url(img/j.svg);
/* background image/graphic */
background-repeat: no-repeat;
/* keeps image from repeating */
background-size: 100% 78%;
/* sizes the image */
height: 100%;
/* positions the image */
width: 100%;
/* positions the image */
margin-top: 8%;
/* will add margin on top */
margin-bottom: -8%;
/* will add margin on bottom */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
.header {
background-image: url(img/j.svg);
/* source of background image */
background-repeat: no-repeat;
/* keeps image from repeating */
background-size: 100% 78%;
/* sizes the image */
/*height: 100%; positions the image */
width: 100%;
/* positions the image */
margin-top: 19%;
/* will add margin on top */
margin-bottom: -8%;
/* will add margin on bottom */
}
}
.body {
/* defines body container/section (background) */
/* PARENT */
width: 90%;
/* defines width */
margin: auto;
/* centers */
padding: 0;
/* removes padding */
border: 0;
/* removes padding */
color: black;
/* text color */
padding-left: 5%;
/* spacing from screen to container/section */
padding-right: 5%;
/* spacing from screen to container/section */
overflow: hidden;
/* keeps text from going over container/section */
height: auto;
/* small text -> small body, big text -> big body */
}
.johnswork {
/* defines background image */
background-image: url(img/johnswork.svg);
/* source of background image */
background-repeat: no-repeat;
/* keeps image from repeating */
height: 20%;
/* sizes the image */
width: 100%;
/* sizes the image */
margin-bottom: 5%;
/* spacing between image and text */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
.johnswork {
/* defines background image */
background-image: url(img/johnswork.svg);
/* source of background image */
background-repeat: no-repeat;
/* keeps image from repeating */
height: 20%;
/* sizes the image */
width: 100%;
/* sizes the image */
margin-bottom: 5%;
/* spacing between image and text */
}
}
.content {
/* defines section/container with actual material */
/* CHILD */
margin: auto;
/* centers section/container */
height: 100%;
/* defines height of section/container */
width: 90%;
/* defines height of section/container */
background-color: white;
/* background color of section/container */
color: black;
/* text color */
border-right: double;
/* adds double border on the right */
border-left: double;
/* adds double border on the left */
box-shadow: 0px -7px 15px 1px rgb(58, 62, 64);
/* defines shadow around section/container */
text-align: justify;
/* jsutifies text in container/section */
font-size: 30px;
/* defines font size */
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines font */
margin-top: 2%;
/* spacing between top of section/container and text/material */
padding-top: 5%;
/* boxes content inside body */
padding-bottom: 10%;
/* boxes content inside body */
padding-left: 5%;
/* boxes content inside body */
padding-right: 5%;
/* boxes content inside body */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
.content {
margin: auto;
/* centers section/container */
height: 100%;
/* defines height of section/container */
width: 90%;
/* defines height of section/container */
background-color: white;
/* background color of section/container */
color: black;
/* text color */
border-right: double;
/* adds double border on the right */
border-left: double;
/* adds double border on the left */
box-shadow: 0px -7px 15px 1px rgb(58, 62, 64);
/* defines shadow around section/container */
text-align: justify;
/* jsutifies text in container/section */
font-size: 15px;
/* defines font size */
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines font */
margin-top: 2%;
/* spacing between top of section/container and text/material */
padding-top: 5%;
/* boxes content inside body */
padding-bottom: 10%;
/* boxes content inside body */
padding-left: 5%;
/* boxes content inside body */
padding-right: 5%;
/* boxes content inside body */
}
}
.social {
margin: auto;
/* centers section/container */
/* CHILD */
display: flex;
/* ??? */
justify-content: center;
/* center aligns content */
align-items: center;
/* center aligns content */
}
.social a img {
/* ONLY FOR CONTACT.HTML */
height: 150px;
/* height of image inside a link/href */
width: 150px;
/* height of image inside a link/href */
color: black;
/* text color of image */
border: none;
text-decoration: none;
/* removes any decoration from image links */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
.social a img {
/* ONLY FOR CONTACT.HTML */
height: 50px;
/* height of image inside a link/href */
width: 50px;
/* height of image inside a link/href */
color: black;
/* text color of image */
border: none;
/* removes border */
text-decoration: none;
/* removes any decoration from image links */
}
}
a img {
/* EVERY IMG IN A LINK */
height: 150px;
/* height of image inside a link/href */
width: 150px;
/* height of image inside a link/href */
color: black;
/* text color of image */
border: 1px solid black;
/* defines border */
border-radius: 8px;
/* rounds borders */
text-decoration: none;
/* removes any decoration from image links */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
a img {
/* EVERY IMG IN A LINK */
height: 50px;
/* height of image inside a link/href */
width: 50px;
/* height of image inside a link/href */
color: black;
/* text color of image */
border: 1px solid black;
/* defines border */
border-radius: 8px;
/* rounds borders */
text-decoration: none;
/* removes any decoration from image links */
}
}
.floatl {
/*desktop*/
float: left;
/*aligns element/object;*/
margin-right: 15px;
/*spacing between right side of element/object and text*/
}
.floatr {
/*desktop*/
float: right;
/*aligns element/object;*/
margin-left: 15px;
/*spacing between left side of element/object and text*/
}
.floatc {
/*desktop*/
display: block;
/* centers image */
margin-left: auto;
/* centers image */
margin-right: auto;
/* centers image */
}
@media (max-width: 768px) {
/*mobile*/
.floatl {
float: left;
/*aligns element/object;*/
margin-right: 15px;
/*spacing between right side of element/object and text*/
}
}
@media (max-width: 768px) {
/*mobile*/
.floatr {
float: right;
/*aligns element/object;*/
margin-left: 15px;
/*spacing between left side of element/object and text*/
}
}
@media (max-width: 768px) {
/*mobile*/
.floatc {
display: block;
/* centers image */
margin-left: auto;
/* centers image */
margin-right: auto;
/* centers image */
}
}
.footer {
/* defines footer */
height: 50px;
/* defines height of footer */
width: 72%;
/* defines width of footer to match content/body section/container */
background-color: black;
/* background color of the footer */
color: white;
/* footer text color */
vertical-align: middle;
/* centers between top and bottom */
margin: auto auto 50px;
/* centers between left and right */
}
#copyright {
display: table;
/*displays as table inside section/container*/
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines font */
}
#cpy {
display: table-cell;
/* displays as cell inside the table */
vertical-align: middle;
/* alignment of the cell */
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines font */
}<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!-- <link rel="stylesheet" type="text/css" href="stylesheet-m.css" media="handheld" /> -->
<link href="https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou" rel="stylesheet">
<!-- <link rel="icon" type="image/x-icon" href="img/favicons/favicon.ico"/> -->
<link rel="apple-touch-icon" sizes="57x57" href="img/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
<link rel="manifest" href="img/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script src="javascript.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3711944124990656",
enable_page_level_ads: true
});
</script>
<meta name="description" content="My Personal Portfolio">
<title>John's Work | WELCOME</title>
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
<header class="header">
<!-- background defined in stylesheet.css-->
</header>
<section class="body">
<section class="content">
<div class="johnswork">
<img src="img/johnswork.svg" alt="John's Work" style="text-decoration: none">
</div>
<section class="article1">
<h2> Article l</h2>
<h1>How to bypass LanSchool on School Computers</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla
eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer
quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada
magna, in suscipit purus.
</p>
<code>
Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.
</code>
<p>
<kbd>
Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.
</kbd>
</p>
</section>
</section>
</section>
<footer class="footer" id="copyright" style="text-align:center">
<div id="cpy">© DA COSTA JOAO (2019)</div>
</footer>
</body>
</html>【问题讨论】：
-
你是指有页脚的margin-bottom 吗？还是有空标题的空间？
-
请添加更多具体问题和预期输出的示例。底部有很多空间，很难判断它是否是特定的，桌面浏览器和移动浏览器之间可能存在什么问题（哪些浏览器？）
-
嗯，我不明白你的意思，但如果你在移动设备上加载页面 (johnswork.eu)，如果你向下滚动，然后向上，然后再向下滚动，你会看到一些空白在底部，看到了吗？这是什么..？
-
好吧，它在台式机上很完美，只是在移动设备上不是，我正在使用带有 chrome 的华为 P20（在台式机上也使用 chrome）
-
两件事可能会有所帮助： 1. 我仍然不确定哪里出了问题，因为我不知道您的预期设计与我在代码示例中看到的设计是什么。也许包括带有一些注释的屏幕截图会有所帮助。 2. 如果我正在查看您的代码，我会看到很多使用百分比的顶部和底部填充/边距。在 CSS 中，百分比始终基于元素的 width，即使您将其应用于上轴或下轴。这可能是您问题的根源 - 请尝试改用非百分比值。