wie untergeordnete div width 80% auf parent-div

den ich einstellen will untergeordneten div-Breite bis zu 80% des parent-div. wie zu tun

<div id='container'>

        <div id="toolbar" class="ui-widget-header ui-corner-all" style="padding:3px; vertical-align: middle; white-space:nowrap; overflow: hidden;">
            <button id="BtnPreviousMonth">Previous Month</button>
            <button id="BtnNextMonth">Next Month</button>
        </div>

        <div id='subcontainer'>

        <div id="mycal" style="position:absolute;"></div>
</div>
</div>

wenn ich mycal Breite und Höhe in %. es hat keine Wirkung. irgendwelche Vorschläge ?

InformationsquelleAutor Chintan_chiku | 2014-01-29
  1. 2

    Set width:80% , können Sie die Breite in Prozent(%) , Der Anteil wird berechnet mit Bezug auf die Breite der erzeugten box ' s containing block.

    HTML:

    <div id="container">
<div id="child">
</div>
</div>

    CSS:

    #container{
   position:relative;
   width:500px;
   height:100px;
}
#child{
   width:80%;
}

    Fiddle Demo

    InformationsquelleAutor Pranav C Balan
  2. 1

    Müssen Sie haben, um mit zu Eltern-div dann, nachdem Sie können geben Sie die Breite in % an Kind-div.

    InformationsquelleAutor Chirag Parekh
  3. 0

    Da Sie festlegen möchten width 80% der child mycal legen width seiner parent subcontainer 

    #subcontainer{
   width:1000px;
   heigth:1000px
}

#mycal{
   width:80%;
   height:20%;
}
    InformationsquelleAutor Green Wizard
  4. 0

    Wenn Sie einen Prozentsatz width und height es einen Effekt hat.
    Ich denke, das problem in Ihrem Fall ist, dass es gerade nicht sichtbar ist, legen Sie einige background-color zu sehen, es

    #mycal {
    width: 80%;
    height: 50%;
    background-color: plum;
}

    Sehen JSFiddle

    Obwohl dies möglicherweise nicht, was Sie wollen. Seit Sie sich gesetzt haben,position: absolute, die mit box ist nicht subcontainer, aber das body-element.

    InformationsquelleAutor Olaf Dietsche
  5. 0

    In Ihrem snippet mycal ist absolut positioniert. Das bedeutet, dass seine Breite und Höhe in % relativ zu der nächstgelegenen nicht-static positionierten übergeordneten (position: relative, absolute, fixed) oder der Körper im Falle dass dort ist keine solche. Wenn Sie möchten, geben mycal 80% Breite subcontainer Sie können 

    #subcontainer {
    position:relative;
}

    aber, da subcontainer keine definierte Höhe und Kind ist absolut positioniert (und daher nicht beeinflussen Elternteils Höhe) - subcontainer's Höhe ist 0. Daher 20% von 0 ist 0. Um dieses Problem zu lösen, können Sie entweder angeben, die Höhe von subcontainer oder füllen Sie es mit statischen Inhalt positioniert.

    Hier ist ein Beispiel: http://jsbin.com/iYOQAKiS/1/edit

    <div id='container'>
    <div id="toolbar" class="ui-widget-header ui-corner-all" style="padding:3px; vertical-align: middle; white-space:nowrap; overflow: hidden;">
        <button id="BtnPreviousMonth">Previous Month</button>
        <button id="BtnNextMonth">Next Month</button>
    </div>

    <div id="subcontainer" style="position:relative;">Some static content
      <div id="mycal" style="position:absolute;width:80%;height:20%"> 
        MyCal content
      </div>
    </div>
</div>
    InformationsquelleAutor Vadim
Schreibe einen Kommentar