100% height and width of screen

Question

my templates like this i want to set every div with proper height and screen if user open this page in small screen than i don't want to change result of my html so what should i have to change in my css to make proper output for every screen.

{block name="head"}
<link rel="stylesheet" href="css/screen.css">
<style>
div{
border: 1px solid gray;
magin : 0 auto;
}
.main{
  width:100%; 
  height:100%;  
  margin :0;
  padding: 0;
  border: 1px solid gray;
}
.left{
  width:300px; 
  height:300px;
  margin : 0 px;
  float:left;
}
.order{
  width:300px; 
  height:300px;
}
.csscalc{ 
  width:300px;
}
.table{
  margin-bottom:
}
.item{
margin-left:300px;
}
</style>
{/block}
{block name="body"}
<form>
<a href="index.php" style="font-size:20px; text-decoration:none;">Home</a>
<div class="main">
  <!--left Div Start -->
  <div class="left">
     <div class="order">

     </div>
     <div class="csscalc">
      <input type="submit" value="1" name="qty" class="calc">
      <input type="submit" value="2" name="qty" class="calc">
      <input type="submit" value="3" name="qty" class="calc">
      <input type="submit" value="4" name="qty" class="calc">
      <input type="submit" value="5" name="qty" class="calc">
      <input type="submit" value="6" name="qty" class="calc">
      <input type="submit" value="7" name="qty" class="calc">
      <input type="submit" value="8" name="qty" class="calc">
      <input type="submit" value="9" name="qty" class="calc">
      <input type="submit" value="10" name="qty" class="calc">
      <input type="submit" value="250" name="qty" class="calc">
      <input type="submit" value="500" name="qty" class="calc">
      <input type="submit" value="750" name="qty" class="calc">
      <input type="submit" value="1000" name="qty" class="calc">
     </div>
     <div class="table">
       {section name="sec1" loop=$tableArray}
         <input type="submit" class="in" value="{$tableArray[sec1].ordertableNm}" name="ordertableId">
       {/section}
       {section name="sec2" loop=$outArray}
         <input type="submit" class="out" value="{$outArray[sec2].ordertableNm}" name="ordertableId">
       {/section}
     </div>
  </div>
  <!--left Div End -->
  <div class="item">
    {section name="sec" loop=$itemArray}
        <input type="submit" class="btn" value="{$itemArray[sec].itemNm}" name="{$itemArray[sec].itemId}">
    {/section}
  </div>
</div>
</form>
{/block}

read from here http://www.w3schools.com/css/css_mediatypes.asp or http://getbootstrap.com/.. — Leo the lion, Jun 24 '15 at 07:00
@Leothelion so i have to set div height and width every time.. — , Jun 24 '15 at 07:01
not every time..if you will start from bootstrap then it will manage automatically but if you have structure ready then use media queries and start from big display to smaller and use height and width in % so you don't have to type all the time..better read and do it yourself so you will know more.. — Leo the lion, Jun 24 '15 at 07:03

Lorenz Merdian · Answer 1 · 2015-06-24T07:47:34.353

1

I guess the properties vh and vw could become your friends.

height: 100vh; /* 100% of viewport height */
width: 100vw; /* 100% of viewport width */

But you might also take a look on vmin, vmax. vh means: percentange of viewport height. vw means: percentage of viewport width.

Here's a obligatory link related to your problem.

If you are interested in a general way to make your site "look cool" on different screen sizes, I would recommend Leo the Lions advice. A easy approach would be to use Bootstrap.

edited Jun 24 '15 at 07:47

answered Jun 24 '15 at 07:17

Lorenz Merdian

722
3
14

so i mean to say that me use vmin, vmax for my div.. – Jun 24 '15 at 07:33
If you want to be your `div`s 100% of *screen* width wide and 100% of *screen* height high, use the snippet i wrote. `vw` means percentage of viewport width and `vh` means percentage of viewport height. That would mean, that the `div` you assign these property values to, will have the width and height of the screen.If padding becomes a problem, you might want to add `box-sizing: border-box;` to the divs, too. – Lorenz Merdian Jun 24 '15 at 07:37

score 1 · Answer 2 · answered Jun 24 '15 at 07:40

You must set the parent HTML tags height to 100%. If you do not set the height of its parents the height of the element will be 0%. Like that:

.fill {
  width: 100%;
  height: 100%;
  background-color: green;
}
html, body, main {
  height: 100%;
}
body{
  margin: 0;
  background-color: red;
}

<html>
  <head>
  </head>
  <body>
    <main>
      <div class="fill">100% width and height</div>
    </main>
  </body>
</html>

score 0 · Answer 3 · answered Jun 24 '15 at 07:11

Well, you can to set for main position:relative, and add special class with something like this.

position: absolute;
top: 0;
bottom: 0;
width: 100%;
min-height: 100%;
z-index: 1 (if it needed)

This is not best solution, but I don't understand, what exactly div must be showed on full window.

score 0 · Answer 4 · answered Jun 24 '15 at 07:23

If you want to work with 100% height you have to make sure that you've set your

html, body{ height:100% }

Like that : http://codepen.io/anon/pen/NqwaRx

Because every child element that receives a % height will have the % height of its parent element.

score 0 · Answer 5 · answered Jun 24 '15 at 07:32

You need to propogate up every parent of .main to have height and width 100% including 'as noa-dev said' html and body.

html,
body,
.main{
  height:100%;
  width:100%;
}

This can still be achieved purely in css. You just need to identify each parent of main and add it to the style above.

100% height and width of screen

5 Answers5