schematu flexbox korpus główny i min-height

https://jsfiddle.net/vz7cLmxy/schematu flexbox korpus główny i min-height

Staram się mieć ciało rozszerzyć ale min-height nie działa. Czytałem inne powiązane tematy, ale nie mogę się z tym pogodzić.

HTML wewnątrz ciała

<div class="menu">Menu</div> 

<div class="wrap"> 
    <div class="sidebar">Sidebar</div> 
    <div class="main">Main</div> 
</div> 

<div class="footer">Footer</div>

CSS

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

body { 
    display: flex; 
    background: #eee; 
    flex-direction: column; 
} 

.menu { 
    background: red; 
    color: #fff; 
    padding: 10px; 
} 
.wrap { 
    display: flex; 
} 
.sidebar { 
    background: #ddd; 
    width: 300px; 
} 
.main { 
    background: #ccc; 
    flex: 1; 
} 
.footer { 
    background: #000; 
    color: #fff; 
    padding: 10px; 
}

Oczekiwany wynik jest, że głównym jest streched wypełnić wysokość jeśli jest to mniej niż 100%.

Źródło

2016-05-25 Jens Törnell

wygląda bardzo podobnie: http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with- css-using-displayflex/25098486 –

Zastosowanie flex: 1 na środku elementu:

.Site { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: column; 
 
} 
 

 
.Site-content { 
 
    flex: 1; 
 
    background-color:#bbb; 
 
}

<body class="Site"> 
 
    <header>This is the header text ☺</header> 
 
    <main class="Site-content">…</main> 
 
    <footer>This is the footer text ☻</footer> 
 
</body>

Źródło

2016-05-25 08:26:33 Randy

Dzięki! Połączenie z ustawieniem flex: 1 na .wrap (w moim przypadku) i o szerokości: 100% na html (zamiast minimal-height) sprawiło, że trik! –

Nie działa z IE11 ... – ssougnez

schematu flexbox korpus główny i min-height

Odpowiedz

Powiązane problemy