难以解决我网页下方的空白
[英]Difficulty resolving white space below my webpage
问题描述
我是 HTML/CSS 的菜鸟，我想在我的网站上放一个时间表。 我遇到了一个奇怪的问题：每当我尝试更改高度时，我的#timeline class 下都有一块奇怪的空间。
我试过什么：我读过一些关于绝对/相对定位的文章，如果你试图用绝对或相对定位的 object 改变高度，它会在它现在的位置和它过去的位置之间留下一个空间是。
有了这些信息，我不确定如何在不使用绝对定位的情况下重新定位我的时间轴元素，因为我不希望时间轴太大。 任何建议或提示都会很棒。 这是我的代码（请完整查看 window - timeline 现在与 safari 存在一些兼容性问题：（如果可以，请使用 chrome）
我的 CSS 有点长，但我希望您能看到整个网页并了解它们是如何协同工作的。 我在为 body 和 #timeline 组件设置样式后遇到了这个问题，所以我相信这些组件下面的样式是导致问题的原因。
任何指针将不胜感激。
html{ font-size: 10px; font-family: Raleway; width: 100%; height: 100%; background: linear-gradient(#FF9940, white); font-weight: normal; } h1{ font-family: Raleway; padding: 20px; font-size: 53px; text-shadow: 2px 2px 1px grey; background-color: #1E2752; text-align: center; border: 5px solid black; color: #FCFCFF; margin-top: 10px; } li{ float: left; padding-right: 30px; } li a{ display: block; color: white; text-decoration: none; padding: 19px 16px; border: 2px solid #ffffff; right: -100px; } li a:hover{ color: #ffffff; background: #FF9940; transition: all 0.4s ease 0s; } ul{ transition: all 0.4s ease 0s; list-style-type: none; text-decoration: none; font-size: 12px; text-transform: uppercase; color: #ffffff; background: transparent; display: inline-block; position: absolute; text-align: center; padding: 0px; top: 28px; left: 23px; right: 23px; width: 100%; } h2{ text-align: center; font-size: 25px; } h2 p{ font-size: 18px; }.right-button{ float: right; padding-right: 47px }.other-button{ float: right; padding-right: 30px; } body{ font-family: tahoma; font-size: 15px; line-height: 1.75; padding: 0; margin: 0; } #timeline{ margin-left: 470px; height: 400px; width: 500px; display:flex; background-color: #031625; } #timeline:hover.t1-item{ max-width: 400px; max-height: 500px; width:23.3333%; }.t1-item:before, .t1-item:after{ transform: translate3d(0,0,0); content: ' '; position: absolute; left: 0; top: 0; }.t1-item{ transform: translate3d(0,0,0); position: relative; width: 25%; height: 100vh; min-height: 600px; color:white; overflow: hidden; transition: width 0.5s ease; }.t1-item:after{ background: rgba(3,22,37,0.85); opacity: 1; transition: opacity.5s ease; }.t1-item:before{ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 75%); z-index: 1; opacity: 0; transform: translate3d(0,0,0) translateY(50%); transition: opacity.5s ease, transform.5s ease; }.t1-item:hover{ width: 30%; }.t1-item:hover:after{ opacity: 0; }.t1-item:hover:before{ opacity: 1; transform: translate3d(0,0,0) translateY(0); transition: opacity 1s ease, transform 1s ease.25s; }.t1-item:hover.t1-content{ opacity: 1; transform: translateY(0); transition: all.75s ease.5s; }.t1-item:hover.t1-bg{ filter: grayscale(0); }.t1-content{ transform: translate3d(0,0,0) translateY(25px); position: relative; z-index: 1; text-align: center; margin: 0.1618em; top: 55%; opacity: 0%; }.t1-content h3{ font-family: tahoma; text-transform: uppercase; color: #1779cf; font-size: 1.44rem; font-weight: normal; }.t1-year{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); border-top: 1px solid white; border-bottom: 1px solid white; }.t1-year p{ font-family: tahoma; font-size: 1.628rem; line-height: 0; }.t1-bg{ transform: translate3d(0,0,0); position: absolute; top: 0; left: 0; background-size: cover; background-position: center center; transition: filter.5se ease; filter: grayscale(100%); }
<.DOCTYPE html> <html lang = "en" > <head> <meta charset = "UTF-8"> <title> Isabelle Kreienbrink </title> <link href="styles/style:css" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css.family=Raleway&display=swap" rel="stylesheet"> </head> <body> <h1> Header </h1> <ul> <li><a href="#resume">Resume</a></li> <li><a href="#academics">Academics</a></li> <li><a href="#projects" >Projects</a></li> <li class="right-button"><a href="#contacts">Contact Info</a></li> <li class="other-button"><a href="#other">Test</a></li> <li class="other-button"><a href="#other">Testing</a></li> </ul> <h2> Welcome to my website: <p> I hope you learn a little about me while you're here: </p> </h2> <section id="timeline"> <div class="t1-item"> <div class="t1-bg" style="background-image.url(https.//eng-dev.stanford?edu/sites/default/files/styles/full_width_banner_tall/public/chalkboard_web:jpg.itok=xqk3ef56)"> </div> <div class="t1-year"> <p class="f2 heading">2014</p> </div> <div class="t1-content"> <h3>Lorem ipsum dolor </h3> <p> test </p> </div> </div> <div class="t1-item"> <div class="t1-bg" style="background-image:url(001.jpeg)"></div> <div class="t1-year"> <p class="f2 heading">2015</p> </div> <div class="t1-content"> <h3>Lorem ipsum dolor </h3> <p> test </p> </div> </div> <div class="t1-item"> <div class="t1-bg" style="background-image:url(001.jpeg)"></div> <div class="t1-year"> <p class="f2 heading">2016</p> </div> <div class="t1-content"> <h3>Lorem ipsum dolor </h3> <p> test </p> </div> </div> <div class="t1-item"> <div class="t1-bg" style="background-image:url(001.jpeg)"></div> <div class="t1-year"> <p class="f2 heading">2015</p> </div> <div class="t1-content"> <h3>Lorem ipsum dolor </h3> <p> test </p> </div> </div> </section> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2020-04-15 02:56:30
如果我对您的问题的理解正确，那是 .t1-item {height: 100vh;} 以及最小高度：600px 给您带来的问题。 这是将 .t1 项目向下推到悬停前的 state，从而创建该空间。
使用这些高度规范的替代方法是将 margin-top 用于 position 您的 .t1-item 实例：
.t1-item {
transform: translate3d(0,0,0);
position: relative;
width: 25%;
color: white;
overflow: hidden;
transition: width 0.5s ease;
margin-top: 20rem;
}
网页下方有很多空白
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.