Machen div erweitern, um den gesamten verfügbaren Platz zu nehmen

Question

Ich möchte eine Desktop-ähnliche ganzseitige Breite Layout. Einige Menüs oben (bekannte Höhe, abhängig vom Inhalt), und div darunter, nimmt den gesamten verfügbaren Platz im Ansichtsfenster ein.

div { 
 
    padding: 0px 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
.outer { 
 
    background: olive; 
 
    height: 100%; 
 
} 
 

 
.menu { 
 
    background: orange; 
 
} 
 

 
.should_fill_available_space { 
 
    background: brown; 
 
}

<div class="outer"> 
 
    <div class="menu"> 
 
    Lorem Ipsum Lorem Ipsum Lorem Ipsum 
 
    </div> 
 
    <div id="this" class="should_fill_available_space"> 
 
    Brown color should go all the way down 
 
    </div> 
 
</div>

Ich habe eine codepen für diesen Fall bekam: https://codepen.io/marek-zganiacz/pen/NvEaxr

ich should_fill_available_space wollen gehen ganz nach unten, wie in dem Fall, in dem menu hätte height:10% und should_fill_available_space haben ' Höhe: 90% `.

Answer 1

Der einfachste Weg, dies zu erreichen, ist die Verwendung von flexbox.

1. Sie weisen dem übergeordneten Container display: flex zu. in Ihrem Fall ist das äußere .outer.
2. Eine Flexbox funktioniert in einer Richtung. So können Sie sie wie eine Spalte (vertikal) oder Zeile (horizontal) betrachten. Standardmäßig werden die untergeordneten Elemente über eine Zeile verteilt. Aber wir wollen eine Spalte erstellen. Daher müssen wir die auf .outer zu flex-direction: column ändern.
3. Jetzt müssen wir angeben, wie wir die flexbox den verfügbaren Speicherplatz in der teilen soll. Normales Verhalten ist, dass die Flexbox ihren Kindern ihre normale Breite/Höhe gibt. Aber durch Zuweisen von flex:1 zu .should_fill_available_space erhält dieses Element den gesamten zusätzlichen verfügbaren Platz. Was die Flexbox im Grunde sagt, ist, dass der Computer alle 1/1 = 100% (benutzter Flex-Wert dividiert durch den gesamten Flex-Wert aller Kinder) verfügbaren Raum für .should_fill_available_space verwenden soll, während der minimale Platz für die .menu Breite beibehalten wird. Technisch flex: ist eine Abkürzung für einige andere Eigenschaften, aber das ist nicht wirklich wichtig für diese Frage.

Hier ist Ihre JS-Fiddle: https://jsfiddle.net/cryh53L7/

html

<div class="outer"> 
    <div class="menu"> 
    Lorem Ipsum 
    Lorem Ipsum 
    Lorem Ipsum 
    </div> 
    <div id="this" class="should_fill_available_space"> 
    Brown color should go all the way down 
    </div> 
</div> 

css

div{ 
     padding: 0px 
    } 
    html, body{ 
     height: 100%; 
     padding: 0px; 
     margin: 0px; 
    } 
    .outer { 
     display: flex; 
     flex-direction: column; 
     background: olive; 
     height: 100%; 
    } 
    .menu{ 
     background: orange; 

    } 
    .should_fill_available_space{ 
     flex: 1; 
     background: brown; 

    } 

Answer 2

Sie könnten das Attribut height nur explizit angeben.

So würde das erste div-Element height of 10% haben, und das zweite hätte height of 90%.

Answer 3

Try this!

ich eine Tabelle Anzeige, hoffe ich es für Sie in Ordnung ist :)

HTML:

<div class="outer"> 
<div class="menu"> 
    Lorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
</div> 
<div id="this" class="should_fill_available_space"> 
    Brown color should go all the way down 
</div> 

CSS:

div{ 
padding: 0px 
} 
html, body{ 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 
.outer { 
background: olive; 
height: 100%; 
display:table; 
width:100%; 
} 
.menu{ 
background: orange; 
display:table-row; 

} 
.should_fill_available_space{ 
background: brown; 
display:table-row; 
} 

div+ div{ 
height:100%; 
} 

Answer 4

Sie können dies mit flexbox in CSS3 (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) erreichen.

Aktualisieren Sie Ihre CSS wie diese, es zu sehen arbeiten:

.outer { 
    background: olive; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
} 

.should_fill_available_space{ 
    background: brown; 
    flex-grow: 2; 
} 

Answer 5

Dies ist, wo die Welt der Web-Dokumentenstandards Ansichtsfenster basierte Desktop-Anwendung Emulation erfüllt. Sie müssen Behälter absolut positionieren. In diesen Containern können Sie relative Positionselemente einrichten oder Elemente verwenden, die den HTML-Fluss verwenden.

Es gibt zahlreiche APIs, die genau das unter den Deckeln tun, und sie werden sich immer auf Javascript-Berechnungen verlassen, um Elemente entsprechend ihrer Dimensionen zu platzieren, nachdem sie an das DOM angehängt wurden.

Hier ist ein einfaches Beispiel auf dem Code basiert:

div{ 
    padding: 0px 
} 
html, body{ 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 
.outer { 
    background: olive; 
    height: 100%; 
    width:100% 
    position:absolute; 
} 
.menu{ 
    background: orange; 
} 
.should_fill_available_space{ 
    background: brown; 
    position:absolute; 
    bottom:0px; 
    width:100vw; 
} 

<div class="outer"> 
    <div id="menu" class="menu"> 
    Lorem Ipsum 
    Lorem Ipsum 
    Lorem Ipsum 
    </div> 
    <div id="this" class="should_fill_available_space"> 
    Brown color should go all the way down 
    </div> 
</div> 

Wie ich bereits erwähnt, können Sie Javascript verwenden, um die Dimension des Menüs abrufen und als das zu Ihrem Layout anwenden.

window.addEventListener("load", function load(event){ 
    var menu = document.getElementById("menu"); 
    var main = document.getElementById("this"); 
    var menuHeight = menu.offsetHeight; 
    main.style.top = menuHeight + "px"; 
},false); 

Und here is the codepen.