How to define height responsiveness using media query in CSS

Question

I am building a responsive website using CSS media query (not using any frameworks like bootstrap, foundation, etc.). Well the website is working fine for the wide screen resolution , 1366*768, but when I open the webpage on a screen resolution like 1280*1024, theres so much space are left below the page. Also I've defined the height of each section as 100vh.

For Screen Resolution 1366*768

For Screen Resolution 1280*1024

How to display the content to cover the whole height of the page in order to remove the blank spaces for screens that have a height greater than 768px?

That depends. Do you want to [scale the text larger](http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container), or make the column of text narrower, or just [vertically center](http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css) the text block? — Blazemonger, Mar 24 '17 at 19:51
Post some of your HTML+CSS so we can tell you some direction to go... What I can say so far is that you probably have fixed-heigth content and you need to use heigth in % — Dinei, Mar 24 '17 at 19:51
@DineiRockenbach I am defining height for each of my section as 100vh as I want to display each section to fill the entire screen. — Shashank, Mar 24 '17 at 19:59
@Shashank My fault, I didn't read your `vh` mention before the images. However, I still think it would be easier to suggest improvements based on real code. — Dinei, Mar 24 '17 at 20:05
@Shashank Also, `100vh` = `100%`, so if you've "defined the height of each section as 100vh", you may have a problem. Can't tell for sure without seeing the code. — Dinei, Mar 24 '17 at 20:07

score 3 · Answer 1 · answered Mar 24 '17 at 22:21

If you want to scale the content in a specific height you can use transform: scale(); and media queries with max-height:

First the HTML

<div class="wrapper">
        <div class="main">
            <h2>Hi my name is Shashank</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p>
        </div>
</div>

Then the CSS

html, body {
  background: #333;
  padding: 0px;
  margin: 0px;
  color: #222222;
  height: 100%;
  width:100%;
  display: table;
}
.wrapper {
  margin: 0 auto;
  position: relative;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}
.main {
  -moz-border-radius: 6px / 6px;
  -webkit-border-radius: 6px 6px;
  border-radius: 6px / 6px;
  padding: 20px;
  background: #4694e8;
  width:300px;
  margin: auto;
  transition: 0.3s;
}
/* When height is 400 or less scale the content to 0.7 */
@media screen and (max-height: 400px) {  
  body {
    background: #444;
  }
  .main {
    -ms-transform: scale(0.7, 0.7);
    -webkit-transform: scale(0.7, 0.7);
    transform: scale(0.7, 0.7);
  }
}
/* When height is 500 or more scale the content to 1.3 */
@media screen and (min-height: 500px) {  
  body {
    background: #222222;
  }
  .main {
    -ms-transform: scale(1.3, 1.3);
    -webkit-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
  }
}

I recomend also center the content with display:table in html and body tags and display: table-cell with vertical-align: middle in the wrapper div

Here is a demo: https://jsfiddle.net/da2ds0nj/2/

I hope this help you, and excuse me by my english.

Thanks, this is helpful too. – Shashank Mar 27 '17 at 18:03 — Shashank, Mar 27 '17 at 18:03

Tyler Sebastian · Accepted Answer · 2017-03-24T19:59:05.870

The easiest solution would be to use a flexbox - you'll get good coverage, as well.

.container {
    display: flex;
    align-items: center;
}

with something like

<div class="container">
    <div><!-- content --></div>
</div>

edit: this is for centering the content vertically - I may have misunderstood what you were trying to accomplish.

If you want to have the content fill up the space vertically, you can try something like:

.container {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
}

and combine it with flex-basis on the children to define a base-line for children you want to be larger. A great resource for flex can be found here.

score -1 · Answer 3 · answered Mar 24 '17 at 19:51

-1

Can't you set the content to fill a percentage height instead of a set number, like this:

content {
height: 70%;
}

answered Mar 24 '17 at 19:51

Jesper

2,044
3
21
50

How to define height responsiveness using media query in CSS

3 Answers3