如何在制作响应式网站时删除 white-space
How can I remove white-space when making a responsive website
我正在使这个网页设计更具响应性，希望得到一些关于我在本网站 CSS 中出错的地方的建议，以阻止它出现白色-space 在底部，并在内容之后将页脚放在适当的高度。
目前我必须滚动很多白色-space才能看到页脚。
这是我的CSS
.carousel-item
{
height: auto;
width: 100%;
text-align: center;
margin: auto;
}
#carouselFade
{
background-color: #f9f7fa;
height: 20%;
border-top: 1px solid #e3dfe6;
margin-bottom:-2%;
margin-top: 10%;
border-bottom: 1px solid #e3dfe6;
padding-top: 2%;
}
footer
{
margin-top: 150px;
flex-shrink: 0;
text-align: center;
}
html, body
{
height: 100%;
}
body
{
display: flex;
flex-direction: column;
}
#content
{
min-height: 30vh;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
flex: 1 0 auto;
margin-top: 50px;
width: 100%;
padding: 10px;
}
我已经设法让视频和图像响应并且它们正在有效地移动，但是我无法摆脱白色-space。
下面是 HTML
<style>
#video
{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom:3%;
margin-top: -6%;
margin-right:30%;
margin-left: 30%;
padding-top: 1%;
padding-bottom: 2%;
padding-left: 2%;
padding-right: 2%;
line-height: 0;
background-color: #faf7fc;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h3
{
font-family: "Brush Script MT", cursive;
margin-bottom: 4px;
color: #cac0cc;
}
.carousel-item
{
height: auto;
width: 100%;
text-align: center;
margin: auto;
}
#carouselFade
{
background-color: #f9f7fa;
height: 20%;
border-top: 1px solid #e3dfe6;
margin-bottom:-2%;
margin-top: 10%;
border-bottom: 1px solid #e3dfe6;
padding-top: 2%;
}
</style>
</head>
<body>
<header>
<!--Navigation-->
<article class="top">
<div class="" id="line">
<img class="logo" src="logo.png" alt="logo">
<h1><span class="lines">D.P.P</span></h1>
</div>
<span class="lines">
<ul>
<li><a href="inspiration.html" style="color: #cac0cc">Inspiration</a></li>
<li><a href="book.html" style="color: #cac0cc"></a></li>
<li><a href="author.html" style="color: #cac0cc">Author</a></li>
</ul>
<hr>
<hr>
</span>
</article>
<div class="spacer"> </div>
</header>
<main id="content">
<div id="video">
<h3> A letter to Max </h3>
<video controls autoplay width="90%" height="80%" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<source src="DianaV.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
<div id="carouselFade" class="carousel slide carousel-fade" data-ride="carousel" dataval="500">
<div class="carousel-inner" role="listbox" style=" width:100%; height: 500px;">
<div class="carousel-item active">
<q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
<p class="author">- John Keats</p>
</div>
<div class="carousel-item">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>
<div class="carousel-item">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class="author">- Thomas A. Edison</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Preload the images-->
<script type="text/javascript">
// preload images
var image = new Array();
function preload(){
for (i=0; i< preload.arguments.lenth; i++){
images[i] = new Image();
image[i] = preload.arguments[i];
}
}
preload("logo.png", "diana mountain.jpg");
</script>
</main>
</body>
<footer>
<hr>
<article>
<p>Connect</p>
<a href="" class="fa fa-instagram" style="font-size: 30px;" target="_blank"></a>
<a href="" class="fa fa-twitter" style="font-size: 30px;" target="_blank"></a>
<a href="mailto:"><i class="fa fa-envelope-o" style="font-size: 30px;" target="_blank"></i></a>
<span style="font-size: 0.5em;"><p>Made by Kieron Spearing</p></span>
</article>
</footer>
</html>
我希望得到一些帮助以及您提出的任何改进建议，以使其设计更好、反应更灵敏
我通过更改 Html 的某些部分解决了您的问题，这是 carousel-inner class 的内联样式 500px 高度并删除了一些重复的样式。
.carousel-item
{
height: auto;
width: 100%;
text-align: center;
margin: auto;
}
#carouselFade
{
background-color: #f9f7fa;
height: 20%;
border-top: 1px solid #e3dfe6;
margin-bottom:-2%;
margin-top: 10%;
border-bottom: 1px solid #e3dfe6;
padding-top: 2%;
}
footer
{
margin-top: 150px;
flex-shrink: 0;
text-align: center;
}
html, body
{
height: 100%;
}
body
{
display: flex;
flex-direction: column;
}
#content
{
min-height: 30vh;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
flex: 1 0 auto;
margin-top: 50px;
width: 100%;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="styles.css" rel="stylesheet">
<link href="menu1.css" rel="stylesheet">
<link href="table.css" rel="stylesheet">
<!-- Social Media Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Diana De Paz Patiño</title>
<link rel="stylesheet" href="slide.css">
<!-- TO enable bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Responsive assisted with https://dzone.com/articles/using-csshtml-make-responsive -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
</head>
<body>
<header>
<!--Navigation-->
<article class="top">
<div class="" id="line">
<img class="logo" src="logo.png" alt="logo">
<h1><span class="lines">D.P.P</span></h1>
</div>
<span class="lines">
<ul>
<li><a href="inspiration.html" style="color: #cac0cc">Inspiration</a></li>
<li><a href="book.html" style="color: #cac0cc">Nada menos que Max</a></li>
<li><a href="author.html" style="color: #cac0cc">Author</a></li>
</ul>
<hr>
<hr>
</span>
</article>
<div class="spacer"> </div>
</header>
<main id="content">
<div id="video">
<h3> A letter to Max </h3>
<video controls autoplay width="90%" height="80%" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<source src="DianaV.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
<div id="carouselFade" class="carousel slide carousel-fade" data-ride="carousel" dataval="500">
<div class="carousel-inner" role="listbox" style=" width:100%;">
<div class="carousel-item active">
<q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
<p class="author">- John Keats</p>
</div>
<div class="carousel-item">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>
<div class="carousel-item">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class="author">- Thomas A. Edison</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Preload the images-->
<script type="text/javascript">
// preload images
var image = new Array();
function preload(){
for (i=0; i< preload.arguments.lenth; i++){
images[i] = new Image();
image[i] = preload.arguments[i];
}
}
preload("logo.png", "diana mountain.jpg");
</script>
</main>
</body>
<footer>
<hr>
<article>
<p>Connect</p>
<a href="https://www.instagram.com/dianadepz/" class="fa fa-instagram" style="font-size: 30px;" target="_blank"></a>
<a href="https://twitter.com/Diana__Depp" class="fa fa-twitter" style="font-size: 30px;" target="_blank"></a>
<a href="mailto:dianadpp@gmail.com"><i class="fa fa-envelope-o" style="font-size: 30px;" target="_blank"></i></a>
<span style="font-size: 0.5em;"><p>Made by Kieron Spearing</p></span>
</article>
</footer>
</html>
您在 HTML 代码中声明该部分的身高为 500 像素。你需要删除它。
<div class="carousel-inner" role="listbox" style=" width:100%; height: 500px;">
做成这个<div class="carousel-inner" role="listbox" style=" width:100%;">
我正在使这个网页设计更具响应性，希望得到一些关于我在本网站 CSS 中出错的地方的建议，以阻止它出现白色-space 在底部，并在内容之后将页脚放在适当的高度。
目前我必须滚动很多白色-space才能看到页脚。
这是我的CSS
.carousel-item
{
height: auto;
width: 100%;
text-align: center;
margin: auto;
}
#carouselFade
{
background-color: #f9f7fa;
height: 20%;
border-top: 1px solid #e3dfe6;
margin-bottom:-2%;
margin-top: 10%;
border-bottom: 1px solid #e3dfe6;
padding-top: 2%;
}
footer
{
margin-top: 150px;
flex-shrink: 0;
text-align: center;
}
html, body
{
height: 100%;
}
body
{
display: flex;
flex-direction: column;
}
#content
{
min-height: 30vh;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
flex: 1 0 auto;
margin-top: 50px;
width: 100%;
padding: 10px;
}
我已经设法让视频和图像响应并且它们正在有效地移动，但是我无法摆脱白色-space。 下面是 HTML
<style>
#video
{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom:3%;
margin-top: -6%;
margin-right:30%;
margin-left: 30%;
padding-top: 1%;
padding-bottom: 2%;
padding-left: 2%;
padding-right: 2%;
line-height: 0;
background-color: #faf7fc;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h3
{
font-family: "Brush Script MT", cursive;
margin-bottom: 4px;
color: #cac0cc;
}
.carousel-item
{
height: auto;
width: 100%;
text-align: center;
margin: auto;
}
#carouselFade
{
background-color: #f9f7fa;
height: 20%;
border-top: 1px solid #e3dfe6;
margin-bottom:-2%;
margin-top: 10%;
border-bottom: 1px solid #e3dfe6;
padding-top: 2%;
}
</style>
</head>
<body>
<header>
<!--Navigation-->
<article class="top">
<div class="" id="line">
<img class="logo" src="logo.png" alt="logo">
<h1><span class="lines">D.P.P</span></h1>
</div>
<span class="lines">
<ul>
<li><a href="inspiration.html" style="color: #cac0cc">Inspiration</a></li>
<li><a href="book.html" style="color: #cac0cc"></a></li>
<li><a href="author.html" style="color: #cac0cc">Author</a></li>
</ul>
<hr>
<hr>
</span>
</article>
<div class="spacer"> </div>
</header>
<main id="content">
<div id="video">
<h3> A letter to Max </h3>
<video controls autoplay width="90%" height="80%" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<source src="DianaV.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
<div id="carouselFade" class="carousel slide carousel-fade" data-ride="carousel" dataval="500">
<div class="carousel-inner" role="listbox" style=" width:100%; height: 500px;">
<div class="carousel-item active">
<q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
<p class="author">- John Keats</p>
</div>
<div class="carousel-item">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>
<div class="carousel-item">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class="author">- Thomas A. Edison</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Preload the images-->
<script type="text/javascript">
// preload images
var image = new Array();
function preload(){
for (i=0; i< preload.arguments.lenth; i++){
images[i] = new Image();
image[i] = preload.arguments[i];
}
}
preload("logo.png", "diana mountain.jpg");
</script>
</main>
</body>
<footer>
<hr>
<article>
<p>Connect</p>
<a href="" class="fa fa-instagram" style="font-size: 30px;" target="_blank"></a>
<a href="" class="fa fa-twitter" style="font-size: 30px;" target="_blank"></a>
<a href="mailto:"><i class="fa fa-envelope-o" style="font-size: 30px;" target="_blank"></i></a>
<span style="font-size: 0.5em;"><p>Made by Kieron Spearing</p></span>
</article>
</footer>
</html>
我希望得到一些帮助以及您提出的任何改进建议，以使其设计更好、反应更灵敏
我通过更改 Html 的某些部分解决了您的问题，这是 carousel-inner class 的内联样式 500px 高度并删除了一些重复的样式。
.carousel-item
{
height: auto;
width: 100%;
text-align: center;
margin: auto;
}
#carouselFade
{
background-color: #f9f7fa;
height: 20%;
border-top: 1px solid #e3dfe6;
margin-bottom:-2%;
margin-top: 10%;
border-bottom: 1px solid #e3dfe6;
padding-top: 2%;
}
footer
{
margin-top: 150px;
flex-shrink: 0;
text-align: center;
}
html, body
{
height: 100%;
}
body
{
display: flex;
flex-direction: column;
}
#content
{
min-height: 30vh;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
flex: 1 0 auto;
margin-top: 50px;
width: 100%;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="styles.css" rel="stylesheet">
<link href="menu1.css" rel="stylesheet">
<link href="table.css" rel="stylesheet">
<!-- Social Media Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Diana De Paz Patiño</title>
<link rel="stylesheet" href="slide.css">
<!-- TO enable bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Responsive assisted with https://dzone.com/articles/using-csshtml-make-responsive -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
</head>
<body>
<header>
<!--Navigation-->
<article class="top">
<div class="" id="line">
<img class="logo" src="logo.png" alt="logo">
<h1><span class="lines">D.P.P</span></h1>
</div>
<span class="lines">
<ul>
<li><a href="inspiration.html" style="color: #cac0cc">Inspiration</a></li>
<li><a href="book.html" style="color: #cac0cc">Nada menos que Max</a></li>
<li><a href="author.html" style="color: #cac0cc">Author</a></li>
</ul>
<hr>
<hr>
</span>
</article>
<div class="spacer"> </div>
</header>
<main id="content">
<div id="video">
<h3> A letter to Max </h3>
<video controls autoplay width="90%" height="80%" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<source src="DianaV.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
<div id="carouselFade" class="carousel slide carousel-fade" data-ride="carousel" dataval="500">
<div class="carousel-inner" role="listbox" style=" width:100%;">
<div class="carousel-item active">
<q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
<p class="author">- John Keats</p>
</div>
<div class="carousel-item">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>
<div class="carousel-item">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class="author">- Thomas A. Edison</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Preload the images-->
<script type="text/javascript">
// preload images
var image = new Array();
function preload(){
for (i=0; i< preload.arguments.lenth; i++){
images[i] = new Image();
image[i] = preload.arguments[i];
}
}
preload("logo.png", "diana mountain.jpg");
</script>
</main>
</body>
<footer>
<hr>
<article>
<p>Connect</p>
<a href="https://www.instagram.com/dianadepz/" class="fa fa-instagram" style="font-size: 30px;" target="_blank"></a>
<a href="https://twitter.com/Diana__Depp" class="fa fa-twitter" style="font-size: 30px;" target="_blank"></a>
<a href="mailto:dianadpp@gmail.com"><i class="fa fa-envelope-o" style="font-size: 30px;" target="_blank"></i></a>
<span style="font-size: 0.5em;"><p>Made by Kieron Spearing</p></span>
</article>
</footer>
</html>
您在 HTML 代码中声明该部分的身高为 500 像素。你需要删除它。
<div class="carousel-inner" role="listbox" style=" width:100%; height: 500px;">
做成这个<div class="carousel-inner" role="listbox" style=" width:100%;">