CODEWITHSUNDEEP
htmlcss
Ankur Gupta
Ankur Gupta

Reputation: 335

Dynamic height setting

Can anybody help me with the illustration mentioned below?

<body>
    <header height="100px"></header>
    <main height="rest of the height of viewport"></main>
</body>

I want <header> of certain predefined height but want that rest of the height of viewport will be grabbed by <main>.

NOTE: No JavaScript code please.

Upvotes: 0

Views: 70

Answers (3)

Samudrala Ramu
Samudrala Ramu

Reputation: 2106

Try This Its Automatically Adjusts Any Resolution With 100PX minus Of Its Height https://jsfiddle.net/samudrala/frw31kbh/

body {
  margin: 0;
  padding: 0;
  height:100vh;
}
header {
  height: 100px;
  width: 100%;
  background: #ff8800;
}
main {
  height: calc(100% - 100px);
  height:-webkit- calc(100% - 100px);
  height:-moz-calc(100% - 100px);
  width: 100%;
  background: green;
}
<body>
  <header></header>
  <main></main>
</body>

Upvotes: 0

Santhosh Kumar
Santhosh Kumar

Reputation: 1732

This is also possible using flex box in css. But this will not support older browser like IE9 >.

<div class="flex">
  <header class="header"></header>
  <main class="flxGrow main"></main>
</div>

.flex{
  display:flex;
  flex-flow:column wrap;
  height:100%
}
.flxGrow{
  flex-grow:1;
}
.header{
  padding:20px;
  background:red;
}
.main{
  background:blue
}
body,html{
  height:100%;
  margin:0
}

Main advantage of using flexbox over vh(vertical height), No need of calculating manual heights of header. This solution will be flexible with any dynamic header heights. Also refer the fiddle here

Upvotes: -1

hdotluna
hdotluna

Reputation: 5732

CSS

header {
    height: 100px;
}

main {
    height: calc(100vh - 100px);
}

What happen here is, VH is your viewport height. So, we should subtract it into header height.

Working Fiddle: https://jsfiddle.net/y10p9atj/

Hope it helps.

Upvotes: 3

Related Questions