Question

首先，其他类似的搜索具有不同的样式，但我找不到合适的样式。

我在页面底部有这么大的空白，我相信这可能是因为我的所有职位亲戚由于负数顶部而可能彼此堆叠。我几乎不知道自己在做什么。

HTML：

<!doctype html>
<html lang="en-US" class="has-lab-nav-bottom lab-theme-light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio - Nafi Chowdhury</title>
<link rel="stylesheet" href="Style.css">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 </head>


<body class="labs-template-default single single-labs postid-2409 logged-in admin-bar no-customize-support">

<div class="container" style="background-color:red;padding-bottom:-500px;"">

  <div class="wrapper" style="background-color:grey;padding-bottom:-500px;">

<div id="logo" >
<img src="name.png" width=475px  height=225px>
</div>

<div class="intro" >
<table width=100%><tr>
    <td><a href="Home.html"><div id="nav">HOME</div></a></td>
    <td><a href="About Me.html"><div id="nav">ABOUT ME</div></a></td>
    <td><a href="Portfolio.html"><div id="nav">PORTFOLIO</div></a></td>
    <td><a href="Extracurriculars.html"><div id="nav">EXTRACURRICULARS</div></a></td>
    <td><a href="Gallery.html"><div id="nav">GALLERY</div></a></td>
    <td><a href="Contact Me.html"><div id="nav">CONTACT ME</div></a></td>
      </tr></table>

</div><!-- .intro -->

<div class="portfoliothumbnails" id="thumbnail1"><img src="Medicine.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle1"Medical Program</div>
<div class="portfoliotext" id="portfoliotext1">Lorem ipsum stuff about school I don't exactly wanna share blah blah ya yeet I have no clue what to write here</div>
<button class="button" id="button1">Learn More</button>

<div class="portfoliothumbnails" id="thumbnail2"><img src="English.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle2">English Esssays/Documents</div>
<div class="portfoliotext" id="portfoliotext2">A collection of my essays and analysis responses throughout my high school career in Language Arts. </div>
<button class="button" id="button2">Learn More</button>

<div class="portfoliothumbnails" id="thumbnail3"><img src="Trends.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle3">Newspaper Publications</div>
<div class="portfoliotext" id="portfoliotext3">Lorem ipsum stuff about school I don't exactly wanna share blah blah ya yeet I have no clue what to write here</div>
<button class="button" id="button3">Learn More</button>

<div class="portfoliothumbnails" id="thumbnail4"><img src="Art.jpg" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle4">Creative Work</div>
<div class="portfoliotext" id="portfoliotext4">Work from English and Art such as plays, poems, drawings, photoshop work, and other forms of creative literature. The majority of this section is populated by my work from the creative writing and journalism class, Writing for Publication, I took my freshman year and Digital Arts I from my sophomore year.</div>
 <button class="button" id="button4">Learn More</button>



</div>
</div>
</body>
</html>

CSS：

#logo{position:absolute;}
body {
margin-left:25%;
margin-right:25%;
}

#nav{text-decoration:none;
font-size:15px;
font-family:Roboto, sans-serif;
color:black;
padding-top:90%;}

a{text-decoration:none;}

.portfoliothumbnails{position:relative;}

#thumbnail1{left:0%;padding-top:0%;background-color:blue;}
#thumbnail2{left:0%;top:-150px;background-color:green}
#thumbnail3{left:0%;top:-225px;background-color:red}
#thumbnail4{left:0%;top:-325px;padding-bottom:0%;}


.button{  background-color: black; 
   border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 10px 24px;
  cursor: pointer;
  font-family:Roboto, sans-serif;
  position:relative;
  font-weight:bold;}

 .button:hover{opacity:0.7;}

#button1{top:-200px;left:75%;}
#button2{top:-300px;left:75%;}
#button3{top:-400px;left:75%;}
#button4{top:-500px;left:75%;}

.portfoliotitles{position:relative;
color:black;
font-size:16px;
font-weight:bold;
font-family:Roboto, sans-serif;}

#portfoliotitle1{top:-200px;left:25%;z-index:999;}
#portfoliotitle2{top:-350px;left:25%;z-index:999;}
#portfoliotitle3{top:-400px;left:25%;z-index:999;}
#portfoliotitle4{top:-550px;left:25%;z-index:999;}

 .portfoliotext{position:relative;
color:black;
font-size:16px;
font-family:Roboto, sans-serif;
margin-right:25%;
background-color:red;
}

#portfoliotext1{top:-200px;left:25%;}
#portfoliotext2{top:-350px;left:25%;}
#portfoliotext3{top:-400px;left:25%;}
#portfoliotext4{top:-550px;left:25%;}

我不知道如何放置4个部分中的每个条带，以便它们在调整大小时能够响应，因此我将它们从相对值更改为绝对值，并使用负值顶部，这样它们就不会彼此向下推。我仍然不知道如何消除底部的大空白，因为在html或我的包装器或容器中添加了页边距底部，或者诸如此类的东西无济于事。

Answer 1

我不确定您要实现的目标，但是例如您可以尝试将此属性添加到html标记中：

html {height: 100vh}

这将减少额外的灰色空间，并让您查看实际视口的100％。

如何摆脱HTML底部的空白？

1 个答案: