locked
how to you set a height like this 100% -5px ? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    how to you set a height like this     100% -5px ?

    hello I want to  have the size of an element to be always 100% the parent width -5px how can I acheave this?
    Wednesday, May 9, 2012 3:21 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote

    There is too much left unsaid in your question to give a meaningful answer.

    Example  - if the parent height is not set (as in the example below), it becomes equal to the child height.

    - what are the starting conditions - ie what is in your CSS and script.
    - what is the structure of your HTML - ie what is your HTML
    - do the widths/heights change dynamically - ie what is in your script

    Please take the time in these cases to make a small working example as in below - that shows HTML and CSS and script.

    If making these examples still helps me, I imagine they would also be beneficial to you.

             

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello World</title>
<style type="text/css">
<!--
body {width:100%;background:#999;color:#000;text-align:center;margin:0;padding:20px;font:bold 16px/18px Arial;}
#pDiv {width:200px;margin:0 auto;background:#0f0;color:#00f;}
#cDiv {width:100%;background:#ddd;color:#00f;}
input {width:95px;margin-top:10px;}
-->
</style>
<script type="text/javascript">
//<![CDATA[
function setH(){
document.getElementById("cDiv").style.height=(document.getElementById("pDiv").offsetWidth-5)+"px";
document.getElementById("cDiv").innerHTML="parent width = "+document.getElementById("pDiv").offsetWidth+"px";
document.getElementById("cDiv").innerHTML+="<br/>child height = "+(document.getElementById("pDiv").offsetWidth-5)+"px";
}
function changeW(w){
document.getElementById("pDiv").style.width=w+"px";
setH();
}
//]]>
</script>
</head>
<body onload="setH();">
<div id="pDiv">
<div id="cDiv">
</div>
</div>
<input type="button" value="200" onclick="changeW(200)" style="margin-right:4px;"/><input type="button" value="220" onclick="changeW(220)"/>
</body>
</html>

    Thursday, May 10, 2012 2:34 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    actually i read somewhere that it is possible to set the width or the height something like this one

    element.width =(100% -5px )

    where the element take the dimension of the parent width minus 5 px,  even if the size of the element is changed

    i can not find any more the web  page  with the exact sintax

    Monday, May 14, 2012 1:10 PM
  • Question
    Sign in to vote
    0
    Sign in to vote

    Yeah ,well, you're probably right in that there might be a shortcut but as it stands both "100%" and "5px" are strings and must be enclosed in quotes. So right now all I can think of is (for those cases where width is a property of the style object) :

    element.style.width=(element.parentNode.offsetWidth-5)+"px";

    Monday, May 14, 2012 4:26 PM
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi,

    If your only requirement is to display and not needed for any computation, below mentioned code may work:

    document.getElementById("").style.marginBottom="5px"

    You can use different margin (left right ) to achieve this.

    Thursday, May 17, 2012 5:19 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    Nope What I am looking for is  sintax to implement this 100%-5px

     not something that more or less simulate that.

    unfortunatly I can not find any more the web page where it explaines how to set the width of an element using exactly this anotation:   [100%-5px]

    Friday, May 18, 2012 12:38 PM