100% screen height and width
my templates like this i want to set each div with proper height and screen if user opens this page on small screen than i dont want to change my html result so i need to change in my CSS to make correct output for each 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}
I think that properties vh
and vw
can become your friends.
height: 100vh; /* 100% of viewport height */
width: 100vw; /* 100% of viewport width */
But you can also take a look at vmin
, vmax
.
vh
means: percentage height of the viewport height.
vw
means: percentage of the viewport width.
Here's a mandatory link related to your problem.
If you're interested in a general way to make your site look "healthy" on different screen sizes, I would recommend Leo Leo's advice. An easy approach would be to use Bootstrap .
source to share
You have to set the height of HTML tags to 100%. If you don't set the height of your parents, the element's height will be 0%. For example:
.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>
source to share
Well, you can set for main position:relative
and add a custom 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 the best solution, but I don't understand what exactly the div should be shown in full window.
source to share
If you want to work at 100% height, you need to make sure you set
html, body{ height:100% }
Like this: http://codepen.io/anon/pen/NqwaRx
Because every child that gets a% height will have the% height of its parent.
source to share