css responsive height or ratio for a div

Question

I want to make a responsive header. Which's ratio will be 6.1:1 or something else. I know how to make a responsive width but I don't know how to maintain ratio. How I'm gonna do that?

<div id="master">
  <div id="header">This is header</div>
</div>

css

#master {width:90%;min-height:800px;margin:0 auto}
#header {width:100%; height:150px;background-color:grey}

Benedikt D Valdez · Answer 1 · 2016-01-12T18:52:43.043

0

One way to achieve this is using the :before pseudo element to set height. This requires all content within to be position: absolute. Here is an example of how you could do it. The padding-top: 40%; is the ratio, basically 40% of it's own with is the height. Change it to whatever you would like.

#master {
  width:90%;
  min-height:800px;
  margin:0 auto;
}
#header {
  width:100%;
  background-color: grey;
  position: relative;
}

#header::before {
  content: '';
  display: block;
  padding-top: 40%;
}

#header .content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  
  padding: 0 20px;
}

<div id="master">
  <div id="header">
    <div class="content">
      This is header
    </div>
  </div>
</div>

edited Jan 12 '16 at 18:52

answered Jan 12 '16 at 18:07

Benedikt D Valdez

409
3
10

1

You should now be using two colons instead of one: https://developer.mozilla.org/en-US/docs/Web/CSS/::before – Rob Jan 12 '16 at 18:49
Good point @Rob, thx – Benedikt D Valdez Jan 12 '16 at 18:52

score 0 · Answer 2 · answered Jan 12 '16 at 18:08

Why don't you use css media queries? css-media query in w3school

You can set your header's ratio on your own, like

<style type="text/css">
@media(max-width: 767px) {
  #master {
    /* your css setting  for smartphone*/
  }
  #header {
   /* your css setting  for smartphone*/
  }
}
@media(min-width: 768px) {
  #master {
    /* your css setting  for tablet(ipad)*/
  }
  #header {
    /* your css setting  for tablet*/
  }
}
@media(min-width: 992px) {
  #master {
    /* your css setting  for laptop*/
  }
  #header {
    /* your css setting  for laptop*/
  }
}
</style>

You can set your own ratio by device's width.

css responsive height or ratio for a div

2 Answers2