How to change width and height of <h1> text dynamically? - html

Question

I am trying to change <h1> and <p> text's width and height dynamically. I want to get parents height and width, then use percentage for changing child's. But all my attempts are failed.
Here is my css example code:
#main-holder #category1 {
height: 80px;
width: 15%;
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border: thin solid #999;
margin-top: 5%;
margin-right: 2%;
margin-bottom: 0px;
margin-left: 6%;
text-align: center;
vertical-align: top;
}
#main-holder #category1 h1 {
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: middle;
line-height: 20%;
text-decoration: none;
}
#main-holder #category1 h1 a {
color: #FFF;
text-decoration: none;
}
#main-holder #category1 h1 a:hover {
color: #999;
text-decoration: none;
}
#main-holder #category1 p {
color: #CCC;
}
in html I am using like this:
<div id="category1">
<h1>MOVIES</h1>
<p>FOR ALL AGES</p>
</div>
I added width and height like below, but it didn't help:
#main-holder #category1 h1 {
height: 50%;
width: 50%;
}

Answer 1

In your code, you dont have #mainholder, but used all the css with that.so none of the styles applied. So I removed that from css and used line-height as 100% along with height. As the parent div have height as 80px, hope this is working fine and this is what you expected.
Updated Demo
Added font-size:2.9vw; for h1
#category1 {
height: 80px;
width: 15%;
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border: thin solid #999;
margin-top: 5%;
margin-right: 2%;
margin-bottom: 0px;
margin-left: 6%;
text-align: center;
vertical-align: top;
background-color:#666;
}
#category1 h1 {
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: middle;
line-height: 100%;
height: 100%;
text-decoration: none;
font-size:2.9vw;
}
#category1 h1 a {
color: #FFF;
text-decoration: none;
}
#category1 h1 a:hover {
color: #999;
text-decoration: none;
}
#category1 p {
color: #CCC;
}
You can use viewport value instead of ems, pxs or pts.
1vw = 1% of viewport width
1vh = 1% of viewport height
Update: Demo
For <p> Height alignment problem, Use background and border for <h1> along with height and line-height like this:
CSS:
#category1 {
height: 80px;
width: 15%;
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 5%;
margin-right: 2%;
margin-bottom: 0px;
margin-left: 6%;
text-align: center;
vertical-align: top;
}
#category1 h1 {
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: middle;
line-height: 80px;
height: auto;
text-decoration: none;
font-size:2.9vw;
background-color:#666;
border: thin solid #999;
}

Answer 2

Why dont you use vw for font-size ?
font-size: 5vw;
Documentation

Answer 3

To change the text size you should use font-size:72px; or font-size:3em;.

Answer 4

One of the options it to use CSSStyleSheet JS object.
Check this tutorial: http://davidwalsh.name/add-rules-stylesheets
This answer provides another approach: modify a css rule object with javascript
You can get stylesheet object and manually modify properties:
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
rules[0].style.height = '80px';