Wie stellen Sie die Höhe des div-nehmen Sie alle Platz?

Hier ist meine css-Regel zusammen mit dem markup:

<div style = "height:100%;">
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">
    <div class='navbar-inner'>
        <div class='container'>
        <ul class="nav nav-list">
            <div>   
            <li <?php if($page == 'upload_track'){ echo "class = \"active\""; }?>><a href = "#">Upload a new Track</a></li>
            <li><a href = "#">View all blog post</a></li>
            <li><a href = "#">View all tracks uploaded</a></li>
        </div>
        </ul>
    </div>
    </div>
</div>
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">

ab jetzt mache ich Ihnen einen inline-Stil, so dass es leicht sein würde, für mich, Sie zu ändern. seit dem Wechsel texteditors ist irgendwie mühsam für mich.

Wie würde ich es machen, dass ein div nehmen, bis alle verfügbaren Höhe? wie die ganz unten auf der Seite. jetzt es sieht wie folgt aus
Wie stellen Sie die Höhe des div-nehmen Sie alle Platz?

was ich sehen wollte ist, dass die schwarz-div nimmt alle verfügbaren Höhe in der Seite

geben Sie uns Ihre css bitte
Haben Sie Lesen die ganze Frage?
Mein kleines wissen schließt aus dem bestimmten Artikel: die Höhe alle Eltern sollten 100% auch die Höhe der Kind sollte 100% sein, da es standardmäßig ist die Höhe "auto" von jedem element. webdesign.about.com/od/csstutorials/f/...

InformationsquelleAutor KyelJmD | 2012-08-29

  1. 5

    Ja, es kann getan werden. Check-out dieses Beispiel JSFiddle.

    Grundsätzlich habe ich geändert, HTML:

    <div id="navbar">
    <div class='navbar-inner'>
        <div class='container'>
            <ul class="nav nav-list">
                <div>   
                    <li><a href = "#">Upload a new Track</a></li>
                    <li><a href = "#">View all blog post</a></li>
                    <li><a href = "#">View all tracks uploaded</a></li>
                </div>
            </ul>
        </div>
    </div>
</div>

    Im wesentlichen alles, was ich Tat war entfernen der äußersten div (das mit nur die style="height: 100%" auf ihm) und gab das nächste div-Element eine id.

    CSS ist wie folgt:

    html, body { height: 100%; }

#navbar { 
    /* this was moved from being an inline style in the div: */
    width:220px; margin-left: 200px;font-size:16px;
    height: 100%;
}​

    Im Grunde, um für die navbar Streifen bis 100% der Höhe, die Sie brauchen, um stellen Sie sicher, dass der html-und der Körper tatsächlich nehmen bis 100% der verfügbaren Höhe. (Das ist, zu 100% auf #navbar ist 100% der Höhe des übergeordneten Elements; wenn das übergeordnete element nicht die Höhe des browser, dann funktioniert es nicht.)

    InformationsquelleAutor Roddy of the Frozen Peas

Schreibe einen Kommentar