CSSの表示ブロックの高さの変更ブラウザウィンドウ

Question

私は例を挙げて説明します：CSSを使ってブロックを描画すると、ブラウザのウィンドウを水平方向にドラッグすると、最小に達するまでブロックの幅が変更されます幅。今はブロックの高さで同じことをしたいのですが、それは問題があるimです。どんな助け？私はあなたがJavascriptをせずにそれを行うことができるとは思わない

#block { 
    margin: auto; 
    margin-top: 100px; 
    display: block; 
    border: 2px solid grey; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    padding: 30px 40px; 
    background-color: rgba(148, 148, 148, 0.15); 
    color: #fff; 
    box-shadow: 0 0 5px #bab9b9; 
    -moz-box-shadow: 0 0 5px #bab9b9; /* Firefox */ 
    -webkit-box-shadow: 0 0 5px #bab9b9; /* Safari, Chrome */ 
} 

Answer 1

：

はここに私のコード例です。

Answer 2

私はあなたの質問で混乱しています。ブロックにmin-widthを設定していません。何を達成しようとしていますか？窓の高さは100％です。

Answer 3

私はあなたがマージンの変更を意味すると思うので、ノーと言いたいと思います。 高さがウィンドウの高さよりも高くなることがあるため、高さでは期待どおりに機能しません。

高さが限られているとうまくいくかもしれませんが、これを試したことはありません。示唆したように、私はあなたがこの効果をしたい場合は、代わりに

Answer 4

さて、あなたが追加することができますJSを使用して... margin-top: auto; margin-bottom: auto;はmargin-left: auto; margin-right: auto;

そう...と同じ効果を持っているとは思わない

padding-top:50% 

あなたのブロックのCSSに、あなたのブラウザの幅を調整すると、高さが変わります。私はこれをFFでしかテストしなかったので、これが他のブラウザで動作するかどうかは分かりません。これがあなたが探しているものであれば100％確信していません。