Is it possible to force a row to have a certain height in the form of a percentage?
I'm trying to center a row (top to bottom) and I'd like to force a row to start at the top of the screen (sticky) with a 25% height and another row, after the middle row, on the bottom (sticky) with a percentage of 25% as well. The middle row would need to be centered top to bottom.
Can someone give me some guidance in this?
I wanted to go the easy route and create a footer that was always at the bottom of the screen and another row that is centered vertically on the screen... I can't seem to do that, so I figured this would be the alternative... if possible.
Row height percentage possible?
Terry Paulhus
Registered User
27 posts
Inger
Senior Advisor
14,622 posts
Online Now
I'm not able to achieve this in RSD. The heights seem to be in px only.
However, in the html Editor it is easy:
However, in the html Editor it is easy:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="tir., 03 nov 2015 12:17:16 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<style type="text/css">
<!--
html{height: 100%; }
body {height: 100%;}
header{ height: 25%; background-color: red;}
#main {height: 50%; background-color: blue;}
footer {height: 25%; background-color: grey;}
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header></header>
<div id="main"></div>
<footer></footer>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="tir., 03 nov 2015 12:17:16 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<style type="text/css">
<!--
html{height: 100%; }
body {height: 100%;}
header{ height: 25%; background-color: red;}
#main {height: 50%; background-color: blue;}
footer {height: 25%; background-color: grey;}
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header></header>
<div id="main"></div>
<footer></footer>
</body>
</html>
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Bob Visser
COO
827 posts
Terry Paulhus wrote:
Is it possible to force a row to have a certain height in the form of a percentage?
Is it possible to force a row to have a certain height in the form of a percentage?
This is something we needed for one of our themes as well and will be in the next update
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
Steve
Senior Advisor
3,111 posts
Bob Visser wrote:
This is something we needed for one of our themes as well and will be in the next update
Terry Paulhus wrote:
Is it possible to force a row to have a certain height in the form of a percentage?
Is it possible to force a row to have a certain height in the form of a percentage?
This is something we needed for one of our themes as well and will be in the next update
Whooohooo!
Taking over the world one website at a time!
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Inger
Senior Advisor
14,622 posts
Online Now
That sounds great! And how 'soon' will that be? 
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Mansour ...
Ambassador
938 posts
It will be Amazing and now I can't wait
https://www.youtube.com/watch?v=Y22s7secJyA
https://www.youtube.com/watch?v=Y22s7secJyA
Guys at coffeecup are awesometacular.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
