柔性箱物品獲得較高的分額

這可能是我沒有看到的一些愚蠢的東西。但我無法弄清楚這一點。柔性箱物品獲得較高的分額

我有這個着陸點，在兩列上有一個粘性的頁腳和一個柔性盒包裝，這使得它們粘在包裝紙的底部，並在調整大小以使屏幕變大時保持底部。

問題是，當我讓屏幕變小時，即使它們的包裝器在導航div之後啓動，導航div也會處於導航div下。

我想要的是，當用戶調整到較小尺寸的屏幕時，列不會處於導航div下。而是讓瀏覽器自動添加一個y-scroll。

這是結構：

.main_wrapper{ 
 
    float: left; 
 
    width: 100%; 
 
    border:1px solid red; 
 
} 
 

 
.content_wrapper{ 
 
    float: left; 
 
    width: 100%; 
 
    height:calc(100vh - 60px); 
 
    background:black; 
 
} 
 

 
footer{ 
 
    float: left; 
 
    width: 100%; 
 
    background:#4096ee; 
 
    height:60px; 
 
    text-align:center; 
 
    color:#fff; 
 
} 
 

 
nav{ 
 
    float: left; 
 
    width: 100%; 
 
    background:yellow; 
 
    color:#000; 
 
    text-align:center; 
 
    height:60px; 
 
    opacity:0.8; 
 
} 
 

 
.landing_content{ 
 
    float: left; 
 
    width: 100%; 
 
    background:green; 
 
    height:100%; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-align-items: flex-start; 
 
    align-items: flex-end; 
 
} 
 

 
.col1{ 
 
    float:left; 
 
    width:36%; 
 
    background-color:red; 
 
    color:#fff; 
 
    height: 400px; 
 
} 
 

 
.col2{ 
 
    float: left; 
 
    width: 64%; 
 
    height: 400px; 
 
    background-color:blue; 
 
    color:#fff; 
 
}

<body> 
 
    <div class="main_wrapper"> 
 
    <div class="content_wrapper"> 
 
     <nav> 
 
     A navigation 
 
     </nav> 
 
     <div class="landing_content"> 
 
     <div class="col1"> 
 
      A content column 
 
     </div> 
 
     <div class="col2"> 
 
      Second content column 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <footer> 
 
     A footer 
 
    </footer> 
 
    </div> 
 
</body>

這裏是codepen：

https://codepen.io/Luciellav/pen/mWrzOz/

感謝名單了很多。

來源

2017-03-07 Teresa Lass

添加'溢出：auto'爲'。 landing_content'。 –

只要給.landing_content一個min-height一樣內容列：

.landing_content { 
    ... 
    min-height: 400px; 
}

來源

2017-03-07 17:53:20 caisah

可悲的是，現在頁腳並沒有粘在底部。它使得發生在頂部的事情現在發生在底部。 –

由於@caisah建議。它的工作原理如果兩個.landing_content和.content_wrapper獲得列的min-height：

.content_wrapper{ 
 
    float: left; 
 
    width: 100%; 
 
    height:calc(100vh - 60px); 
 
    background:black; 
 
    min-height:400px; 
 
} 
 

 
.landing_content{ 
 
    float: left; 
 
    width: 100%; 
 
    background:green; 
 
    height:100%; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-align-items: flex-start; 
 
    align-items: flex-end; 
 
    min-height:400px; 
 
}

在同一codepen工作：

https://codepen.io/Luciellav/pen/mWrzOz

來源

2017-03-07 22:26:50

柔性箱物品獲得較高的分額

回答

相關問題