難以解決我網頁下方的空白
[英]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.