ビューポートの上端と下端からの距離が最小の可変高さDIV

Question

これは他の部門の制御用のウィジェットであるはずのdivがあります。

他のすべてのものの上に（z-インデックスのように）配置する必要があり、ビューポートの上部から特定の距離（たとえば10em）でなければなりません。ページがビューポートを超えない可能性があるため、position：fixedまたはposition：absoluteのいずれかになります。さて、私はそれが（コンテンツに応じて）viariableの高さであることを望みますが、またはmin-heightを持っていて、例えば、ビューポートの底に5 emより近くに決してありません。

私が書きたいことは次のとおりです。

.myDiv { 
position: absolute; 
top: 10em; 
min-height: 8em; 
max-height: 100% - 15em; //which doesn't work 
overflow: auto; 
} 

は、CSSを使用して、可能な限りそのようなことですか？

Answer 1

cssを単独で使用することは明らかに不可能です。私は今、javascriptを使用しています。ここでは、コードです：

//within a prototype.js environment 
var innerHeight = (typeof window.innerHeight === 'undefined') ? document.documentElement.clientHeight : window.innerHeight; 
var emSize = parseFloat($(document.body).getStyle('font-size')); 
someElement.style['maxHeight'] = (innerHeight - (14 * emSize)).toString() + 'px'; 

Answer 2

なぜmax-height:98%;を使用しないのですか？

この方法では、常に下部にスペースがあります（固定スペースではありません）。

固定スペースを持つ唯一の方法は、JavaScriptを使用してビューポートの高さを取得し、ウィジェットの最大高さをそれに応じて設定することだと思います。

Answer 3

ティム、

はまず、私はあなたが、EMを使用している理由はわからないんだけど、あなたのために働くものは何でも私は推測します。あなたはかなりある

が、ここで私はあなたがやりたいために使用するコードです、唯一のものではなく、ビューポートのBTMから一定distenceの、私は％を使用したことです。私はそれがあなたが求めているように行動すると思う。

`.myDiv { 
position:absolute; 
color:#fff; 
background:#000; 
top:20px; 
width:150px; 
min-height: 100px; 
max-height: 90%; 
overflow:auto; 
}` 

`<div class="myDiv"> 
content<br>content<br>content<br>content<br> 
content<br>content<br>content<br>content<br> 
content<br>content<br>content<br>content<br> 
content<br>content<br>content<br>content<br> 
content<br>content<br>content<br>content<br> 
content<br>content<br>content<br>content<br> 
content<br>content<br>content<br>content<br> 
content<br>content<br>content<br>content<br> 
</div>` 

私はこれがあなたが探していることを望む！

check it out here

Answer 4

私はあなたがこれを複雑に超えていると思います。なぜこれを試してみませんか？一番上にちょっとした詰め物が追加されます。必要ならば、他のdivが何をしているかによって、余白を使用することもできます。

.myDiv { 

postion: absolut; 
padding-top: 10em; 
min-height: 100px; 
max-height: 98%; 
overflow: auto; 

Answer 5

それが遅れているが、これを探して他の人々を助けるためにいますが、CSS3のcalc()機能を使用することができます。それは以下のように使用することができます -

.myDiv { 
    position: absolute; 
    top: 10em; 
    min-height: 8em; 
    max-height: calc(100% - 15em); 
    overflow: auto; 
} 

この機能は、古いブラウザではサポートされていないと我々はそれの内側次の算術演算子のいずれかを有することができる - + - * /