使用最小高度時，背景不會填充頁面底部的空白

最後一個媒體查詢（分辨率：529x266）使我的每個塊（「工作，關於，僱用」）都具有最小高度。但是我的背景並沒有填補額外空間。如何讓我的背景填充額外的空間？要查看空白區域，請使codepen爲529x266或更小。使用最小高度時，背景不會填充頁面底部的空白

https://codepen.io/anon/pen/QpVBGZ

html {height: 100%; font-size: 100%;} 
 
body { 
 
    height: 100%; 
 
    font-size: 1rem; 
 
} 
 
* { 
 
    margin: 0; 
 
    border: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
section { 
 
    display: flex; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: url("https://images.unsplash.com/photo-1483914764278-6f2b1e39bba5?dpr=1&auto=format&fit=crop&w=1500&h=1377&q=80&cs=tinysrgb")no-repeat; \t 
 
    background-size: 100% 100%; 
 
} 
 
.work, .about, .hire { 
 
    display: flex; 
 
    height: 100%; 
 
    width: 33.3%; 
 
    opacity: 0.7; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.opacity { 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #000000; 
 
    z-index: 100; 
 
} 
 
span { 
 
    position:absolute; 
 
    height:100%; 
 
    width: 33.3%; 
 
} 
 
/* Text */ 
 
p { 
 
    position: absolute; 
 
    font-size: 5em; 
 
    font-weight: 900; 
 
    font-family: 'Teko', sans-serif; 
 
    text-transform: uppercase; \t 
 
    text-align: center; 
 
} 
 
a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
/* Hover */ 
 
.opacity:hover { 
 
    opacity: 0; 
 
} 
 
.work:hover, .about:hover, .hire:hover { 
 
    opacity: 1; 
 
} 
 

 

 
/* Media Queries */ 
 
/* 529px at 16px */ 
 
@media only screen and (max-width: 33.0625em) { 
 
    section { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    .work, .about, .hire { 
 
    height: 33.3%; 
 
    width: 100%; 
 
    } 
 
    span { 
 
    height: 33.3%; 
 
    width: 100%; 
 
    } \t 
 
} 
 
/* 266px at 16px */ 
 
@media only screen and (max-height: 16.625em) and (max-width: 33.0625em) { 
 
    section { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    .work, .about, .hire { 
 
    min-height: 38.3%; 
 
    width: 100%; 
 
    } 
 
    span { 
 
    min-height: 38.3%; 
 
    width: 100%; 
 
    } 
 
}

<section> 
 
    <div class="work"> 
 
    <div class="opacity"> 
 
     <a href="#"><span></span></a> 
 
    </div> 
 
    <p><a href="#">Work</a></p> 
 
    </div> 
 
    <div class="about"> 
 
    <div class="opacity"> 
 
     <a href="#"><span></span></a> 
 
    </div> 
 
    <p><a href="#">About</a></p> 
 
    </div> 
 
    <div class="hire"> 
 
    <div class="opacity"> 
 
     <a href="#"><span></span></a> 
 
    </div> 
 
    <p><a href="#">Hire</a></p> 
 
    </div> 
 
</section>

來源

2017-03-27 Pathway

的空白是因爲身體內的元件溢出，並且默認溢出是可見的。

那麼，爲什麼內容溢出？這是因爲.work .about .hire每個都有38.3%的min-height。由於其中有三個，所以總計min-height> 100％，因此元素溢出並且您獲得了白色條帶。

將.work .about .hire的最小高度更改爲33％，並調整項目的字體大小或其他屬性以適應高度限制。

來源

2017-03-27 23:31:48 Samuel

感謝您的回覆，我實際上試圖讓我的背景更大，以便填充溢出。目標是有一個垂直滾動，並有背景填充溢出。 – Pathway

我不會讓溢出成爲您設計的一部分。這很難合作，它會讓你的生活變得非常複雜。如果你想滾動，你應該通過使物品的高度爲固定尺寸來以正常/安全的方式進行。例如。將'.work .about .hire'的高度設置爲像素值而不是'38.3％'。 – Samuel

使用最小高度時，背景不會填充頁面底部的空白

回答

相關問題