Setting a fixed height and width for a <div>
Question
function scrollfun()
{
var ob = document.getElementById('rowScroll');
ob.style.height ="300px";
ob.style.width = "200px";
}
Here rowScroll is the <div> id. The above code is working properly. But the following code is not working:
function scrollfun()
{
var ob = document.getElementById('rowScroll');
ob.style.height ="30%";
ob.style.width = "20%";
}
How can I get this working with percentages?
4 answers
solution1
0 2013-01-31 07:09:01
You will need to use a div tag to achieve this. See the working code below:
<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
document.getElementById("b1").style.height="200%";
}
</script>
</head>
<body>
<div style="height:25px;">
<input type="button" id="b1" onclick="displayResult()" value="Change height of button" >
</body>
</html>
solution2
0 2013-01-31 07:09:09
What if you "tell" it what are these percentages from. like
function scrollfun()
{
var ob = document.getElementById('rowScroll');
ob.style.height = (container-width * 30)/100 + "px"
ob.style.width = (container-width * 20)/100 + "px"
}
solution3
0 2013-01-31 07:11:17
FYI percentage based width height depends upon parent container of your element 'rowScroll'. Try giving height, width info to the parent itself...
UPDATE:
for making height width 50% of screen following will do:
function windowHW() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return [myHeight,myWidth];
}
function scrollfun()
{
var ob = document.getElementById('rowScroll');
document_dimension = windowHW();
ob.style.height =document_dimension[0]/2;
ob.style.width =document_dimension[1]/2;
}
Please note that function windowHW is slight modification of solution given in:
stackoverflow question: JavaScript - Get Browser Height answered by meder
solution4
0 2013-01-31 07:11:34
just use the property className from javascript
function scrollfun()
{
document.getElementById("rowScroll").className = "MyClass";
}
And in your css
.MyClass{height:30%;width:20%;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.