中心圖像的底部有一個視口高度的div

我試圖讓圖像坐在div的底部。 div的視口高度爲100，但最小高度爲680px。直到我開始向下滾動頁面並且視口高度小於680像素時，該圖像位於底部。中心圖像的底部有一個視口高度的div

HTML：

<header> 
    <div class="container"> 
     <div class="arrow"> 
      <img src="arrow.png"> 
     </div> 
    </div> 
</header>

CSS：

header { 
    background-color: #29a9e2; 
    height: 100vh; 
    min-height: 680px; 
    background-size: cover;} 

.container { 
    width: 100%; 
    max-width: 1200px; 
    margin: 0px auto;} 

.arrow { 
    /* this is just what i've been experimenting with*/ 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    padding-top: 600px;}

下面是表明一種我的問題是什麼小提琴。 https://jsfiddle.net/u7b95fve/

（使視口小於680px，然後向下滾動）。感謝您的幫助。

來源

2016-07-06 Nor1Gamez

您需要將position:relative添加到<header>的樣式中。

然後position:absolute爲.arrow將正常工作。

原因：如果你想絕對中的另一個元素位置的元素，你必須明確地聲明定位爲父元素。

來源

2016-07-06 12:43:38 Rounin

是的，完美。謝謝。 – Nor1Gamez

還有一個問題給你。儘管我將div的最小高度設置爲680像素，但似乎文本溢出視口高度可能是因爲它的大小。如果文本溢出，或者我應該使用FitText，是否有再次增加高度的方法？ – Nor1Gamez

一種可能的解決方案可能是使用'overflow-y：auto' - 如果文本的高度超過可用的垂直空間，這將向垂直滾動條添加一個垂直滾動條到'

'。然而，確保父級高度最常用的方法是擴展文本高度，方法是部署'height：auto;'......如果您聲明'min-高度：爲680像素;' – Rounin

中心圖像的底部有一個視口高度的div

回答

相關問題