CODEWITHSUNDEEP
htmlcssbrowserscaling
SpaceApe
SpaceApe

Reputation: 639

Scaling down div height when browser is scaled down

I set a div to height: 400px; and width 100%;

I want it to become smaller when the browser is scaled down. max-height: 400px would be an answer, but then the div becomes 0px high... if you understand what I mean. The div isn't 400px high anymore with max-height: 400px;

The content of the div is text. this text is still visible but I need the whole div to be 400px heigh (for background-color and for the div's below this div).

What I want: i want a div with a min-height but would scale down when the browser is scaled down...

Upvotes: 0

Views: 7581

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Example codepen: http://cdpn.io/cjyaq

Set height:100% and max-height: 400px to the div element

Set also height: 100% for both html and body element

Relevant CSS

html, body { padding: 0; margin: 0; height: 100%; }

div { 

  border: 3px red solid;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  height: 100%; max-height: 400px; 
}

Note: if your browser is modern enough and it supports vh/vw units is not necessary to set the height of body and html elements: just apply

height: 100vh; max-height: 400px;

on your div element

Upvotes: 1

Tauri28
Tauri28

Reputation: 908

Assign both height:100% and max-height:400px to the DIV.

Upvotes: 0

Related Questions