絕對定位頁腳在可滾動div

Question

我似乎無法使頁腳粘到可滾動div的底部。 當div有幾個字符或多個字符和溢出時，頁腳應該緊貼底部。還要注意這不是在身體上，而是任何任意的div。

<div class="blue"> 
     <div class="red"> 
      Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet Nam liber tempor cum 
      soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim soluta nobis eleifend option congue 
      nihil imperdiet doming id quod mazim placerat facer possim Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim soluta nobis eleifend option congue nihil imperdiet doming id quod mazim 
      placerat facer possim Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim 
     </div> 

     <div class="lime">footer</div> 
</div> 

<style> 
    * { 
     box-sizing: border-box; 
    } 

    html { 
     height: 90% 
    } 

    body { 
     height: 100%; 
    } 

    .blue { 
     position: relative; 
     border: solid 5px blue; 
     height: 100%; 
     overflow-y: auto; 
    } 

    .red { 
     width: 200px; 
     border: solid 5px red; 
     margin-bottom: 100px; 
    } 

    .lime { 
     position: absolute; 
     bottom: 0px; 
     width: 250px; 
     height: 100px; 
     border: solid 5px lime; 
    } 
</style> 

這裏是我的小提琴：https://jsfiddle.net/CaptM44/yk99pgzz/

UPDATE： this image shows the requirements

通知內容長度和滾動條位置

Answer 1

你可以讓你的石灰相對的，只要給切緣陰性等於其高度：

.lime { 
    position: relative; 
    margin-top: -100px; 
    width: 250px; 
    height: 100px; 
    border: solid 5px lime; 
} 

也從紅色刪除保證金：

.red { 
    width: 200px; 
    border: solid 5px red; 
} 

Answer 2

您可以使用「包裝」的元素來包裝.red它裏面。對於.wrapper，您設置了100％的高度，並且overflow-y和.lime將會在「.wrapper」之後。

.wrapper { 
    height: 100%; 
    overflow-y: auto; 
} 

jsFiddle

Answer 3

你似乎在尋找的min-height，max-height和justify-content的特定組合：

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 

 
.blue { 
 
    border: solid 5px blue; 
 
    max-height: 90vh; 
 
    min-height: 90vh; 
 
    overflow-y: auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
} 
 

 
.red { 
 
    width: 300px; 
 
    border: solid 5px red; 
 
} 
 

 
.lime { 
 
    height: 100px; 
 
    border: solid 5px lime; 
 
    width: 300px; 
 
    flex-shrink: 0; 
 
}

<div class="blue"> 
 
    <div class="red"> 
 
     Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet Nam liber tempor cum 
 
     soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim soluta nobis eleifend option congue 
 
     nihil imperdiet doming id quod mazim placerat facer possim Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim soluta nobis eleifend option congue nihil imperdiet doming id quod mazim 
 
     placerat facer possim Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim 
 
    </div> 
 

 
    <div class="lime">footer</div> 
 
</div>

注意你需要同時設置min-height和請撥打電話號碼爲，電話號碼爲.blue。用您想要的容器高度替換90vh。