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

  • Question

  • 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

  • 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
  • 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
  • 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
  • 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
  • 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