スクロール可能な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になります。あなたがmin-height、max-heightとjustify-contentの特定の組み合わせを探しているように見える

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

jsFiddle

Answer 3

：

* { 
 
    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を希望するコンテナの高さに置き換えます。