要素を画面 …
下図の様にheight:auto;が効いてない場、floatが関わっていると思われます。つまりfloatを解除する事ができれば、図左の様にheightが効いた正常な状態になります。 まずは、図左の場合のHTMLとCSSを記載 … body {height:100%;} #main {height:100%;} …これで解決か？ と安心してしまいそうですが、実はこれでもまだNG。 なぜならば、body の親要素にはさらに html が存在し、html の高さが、やはりデフォルトでは「100%」ではなく「auto」だから。 html, body { height: 100%; } htmlにcssを指定するのは個人的に違和感もありますが、これを指定することで解決します。 height: 100vh;を使う. 大方デザインが完了して最後のチェックしてるときにscrollが動かなくてheight:100%;したのに動かないときに見ると幸せになります。 AskMe♥ scrollが効かないときはheightを見直そう. 2016-01-25. body{ height: 100% }が効かないときは.
一方 height: 100% という指定は親ボックスの高さから計算されるわけですが、これは親ボックスの高さが確定している場合に限ります。int32_tさんが書かれているように、親ボックスの高さが不定の場合はこの記述は機能しません。 従って横幅を指定してない方の セルの長さは （表全体の横幅400） - 150 = 250ピクセル になります。 また、上の段のセルは高さは指定 してませんが下の段のセルの高さを50ピクセルに指定しているので、 上の段のセルは高さは （表全体の高さ150） - 50 = 100ピクセル になります。 CSS ハマったこと. これにも100%を指定してあげないとbodyの高さはいっぱいになりません。 html { height: 100%; } body { width: 100%; height: 100%; } ということで、初めのほうにハマったことでした。 Hello New World こんにちは、新しい世界. tableの高さを固定したく、heightとoverflowを指定したんですが、 tableに記述したソース分の大きさ（高さ）になり、スクロールバーが表示されません。 height: 100vh; を指定すると、高さが画面の高さと同じになります。これが1番簡単ですが、対応するブラウザがIE9以上となります。IE以外は問題なく使えます。 IE7な … 『width』プロパティと『height』プロパティが効く要素と効かない要素があったりして少しややこしいところもありますが、やってることは大きさを変更しているだけなのでちょっと予想と違った挙動になったらその都度google先生に聞いてみればすぐ解決するかと思います。