CSS - 重新調整頁面時整個部分消失

我試圖向我的主頁添加一些媒體查詢。當我調整頁面大小時，整個部分會被切斷。該部分位於標題正下方，幷包含一個背景圖像，其上方有一個圖像，它也是一個a標記。在該部分的底部還有一個小條部分（.showreel），它也消失了。CSS - 重新調整頁面時整個部分消失

這是部分的CSS -

/* HOME PAGE */ 

section#home { 

    height: 400px; 

    background: url(../images/homepagemain.jpg) center center no-repeat; 
    background-size: 100%; 
    background-position: center; 
    overflow: hidden; 

    position: relative; 
} 

#agencyimage { 

    position: absolute; 
    margin: 0; 
    top: 40%; 
    left: 50%; 
    transform: translate(-50%, -50%); 

} 



.showreel { 
    height: 50px; 
    max-width: 100%; 
    position: absolute; 
    background-color: black; 
    bottom: 0; 
    padding: 0 30px; 
    justify-content: space-between; 
} 

.showreel, .showreel > div.seemore { 
    display: flex; 
    align-items: center; 
    justify-content: flex-start; 
    flex:1; 
} 
.showreel, .showreel > div.seeour { 
    justify-content: flex-end; 
    flex:1; 
    display: flex; 
    align-items: center; 
} 

.showreel p { 
    font-size: 15px; 
    font-weight: normal; 
    margin: 0; 
    padding-left: 10px; 
    color: #ffffff; 
} 

.showreel i { 
    color: #ffffff; 
} 

.seemore { 
    margin-left: 30px; 
} 


.seeour i { 
    margin-right: 30px; 
}

HTML

<section id="home"> 

     <a href="agency.html"><img src="images/AGENCY-BUSINESS.png" id="agencyimage" style="width: 150px; height: 250px;"></a> 

     <div class="container showreel"> 
      <div class="seemore"> 
       <span class="fa-stack fa-lg"> 
        <i class="fa fa-circle fa-stack-2x" style="color:#fff"></i> 
        <i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i> 
       </span> 
       <p>SEE MORE</p> 
      </div> 
      <div class="seeour"> 
       <p>SEE OUR SHOWREEL</p> 
       <i class="fa fa-play-circle fa-3x" aria-hidden="true"></i> 
      </div> 
     </div> 
    </section>

對於我的媒體的質疑，我已經把這個 -

@media screen and (max-width: 1000px) { 
    div.container { 
    float: none; 
    margin: 0 20px 0 20px; 
    } 

    div.column { 
    float: none; 
    width: 50%; 
    } 
} 

@media screen and (max-width: 480px) { 


    header { 
    float: none; 
    height: auto; 
    position: relative; 
    } 

    nav { 
    float: none; 
    text-align: center; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    } 

    nav a { 
    display: block; 

    } 



    section#home { 
    float: none; 
    height: auto; 
    background-size: 100%; 
    } 

    section#home a { 
    position: relative; 
    }

我想這可能與絕對/相對造型的位置有關，但我可以不知道。我嘗試了各種各樣的變化，但沒有任何東西 - 顯然有一些基本的東西我失蹤，但無法弄清楚。任何援助將不勝感激。

來源

2017-07-31 Mike.Whitehead

我認爲一些html會有所幫助。也許問題是部分＃home高度：自動 –

使用你的CSS和HTML創建一個演示。會讓任何想要幫助你的人更容易。 – Sotiris

您需要提供[最小，完整和可驗證的示例]（http://stackoverflow.com/help/mcve） –

問題是你給部分＃主頁身高：汽車。

設置一節一個固定的高度是這樣的：

section#home { 
    height:400px; 
}

來源

2017-07-31 15:17:59

沒有，這是沒有任何意義 - 我相信它與位置風格規則有關，但無法弄清楚什麼或如何克服。 –

會發生什麼情況是正常的。對於480像素或更低的斷點，將section#home的高度更改爲auto，但這會給此元素帶來高度0，因爲在此元素中您將元素定位爲position:absolute。結合你的overflow:hidden爲section#home，所以任何內容都將被隱藏。

可以固定高度設置爲section#home或改變position:absolute到position:relative或position:static爲內部元件，並繼續從該點的發展。

來源

2017-07-31 15:21:03 Sotiris

因此，我應該改變媒體查詢中的斷點嗎？ –

不一定。取決於你想達到的目標。如果有理由將'height'設置爲'auto'，則使用'position：absolute'查找'section＃home'內的元素，並將其''position'改爲'static'或'relative'。例如'＃agencyimage'就是這樣一個元素。當你這樣做時，請回顧它的外觀，並從這一點繼續進行開發和修改。 – Sotiris

整個部分仍然消失，我嘗試了所有不同的方式推薦。很奇怪。 –

CSS - 重新調整頁面時整個部分消失

回答

相關問題