Элемент взять оставшуюся высоту окна просмотра

Пожалуйста, обратите внимание этот стиль:Элемент взять оставшуюся высоту окна просмотра

.root { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 
.header { 
    width: 100%; 
    background-color: red; 
    display: flex; 
    height: 100px; 
    justify-content: space-between; 
    .logo-pane { 
    width: 100px; 
    height: 100px; 
    background-color: green; 
    } 
    .user-actions { 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    } 
} 

.content { 
    flex-grow: 1; 
    background-color: pink; 
}

То, что я хочу, чтобы добиться того, что content элемента будет принимать оставшуюся высоту окна просмотра, но это занимает только его высоту содержимого.

HTML:

<div class="root"> 
    <div class="header"> 
    <div class="logo-pane">Logo</div> 
    <div class="user-actions">User Actions</div> 
    </div> 
    <div class="content"> 
    content 
    </div> 
</div>

Codepen

источник

2016-06-09 ronen

укажите html-код? – Thinker

?? ваш код и codepen просто делает то, что вы просите –

Проблема заключается в окружающих .root. Вы должны увеличить высоту .root до оставшегося места. Поэтому вы должны установить height:100vh; на .root. Попробуйте следующее решение:

body, html { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.root { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
    align-items:stretch; 
 
    align-content:stretch; 
 
} 
 
.header { 
 
    width: 100%; 
 
    background-color: red; 
 
    display: flex; 
 
    height: 100px; 
 
    justify-content: space-between; 
 
} 
 
.logo-pane { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green; 
 
} 
 
.user-actions { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
} 
 
.content { 
 
    flex-grow:1; 
 
    background-color: pink; 
 
}

<div class="root"> 
 
    <div class="header"> 
 
    <div class="logo-pane">Logo</div> 
 
    <div class="user-actions">User Actions</div> 
 
    </div> 
 
    <div class="content">content</div> 
 
</div>

источник

2016-06-09 12:28:40

Зачем не хватать 'height: 100%' root? – ronen

@ronen, потому что для% value нужна ссылка из css, чтобы иметь возможность вычислить что-то. высота: 100%; работает только для HTML. поэтому .root {height: 100%} необходимо наследовать ссылку, чтобы быть чем-то. поэтому вам нужно сделать html {height: 100%}, тогда он может использоваться для тела {height: 100%} и отсюда .root будет применять эти 100% из области просмотра. значение, каскадное из wiewport/html через тело в .root, теперь имеет значение высоты видового экрана ---. надеюсь, что это было ясно :) –

.content { 
    flex-grow: 1; 
    background-color: pink; 
    height: 100vh; 
}

источник

2016-06-09 12:29:39 HandsomePhil

Вы можете просто добавить

height: 100% в html, body
добавить высоту 20% для корневой DIV
высоты добавить в 80% для содержимого DIV

решит вашей проблему

html,body { 
    height: 100%; 
}

Вот jsFiddle

Надеется, что это помогает :)

источник

2016-06-09 12:33:26 Thinker

Я думаю, ваше недопонимание, что прогибается делает. Flex используется для выравнивания своих дочерних элементов, а не для заполнения области просмотра. Это еще одно решение.

https://jsfiddle.net/rob_primacy/1wnpr50s/

<div class="root"> 
<div class="header"> 
    <div class="logo-pane">Logo</div> 
    <div class="user-actions">User Actions</div> 
</div> 
</div> 
    <div class="content"> 
    content 
    </div>

и CSS

.root { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    position: relative; 
} 
.header { 
    width: 100%; 
    background-color: red; 
    display: flex; 
    height: 100px; 
    justify-content: space-between; 
    position: relative; 
} 
.user-actions { 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
} 
.logo-pane { 
    width: 100px; 
    height: 100px; 
    background-color: green; 
} 

.content { 
    background-color: pink; 
    position: absolute; 
    height: 100%; 
left: 8px; 
right: 8px; 
}

источник

2016-06-09 12:37:15 Rob

nop, flex может заполнить любой контейнер, который имеет ширину или высоту. сгибать: 1; сам по себе делает трюк. если несколько детей, то flex: 1; (для них) будет распыляться, а затем равномерно, чтобы заполнить весь контейнер. op делает: высота: 100vh на гибком контейнере, это прекрасно :) –

Полезно знать ... спасибо! – Rob

Используйте как этот

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
 
<title>Untitled 1</title> 
 

 
<style type="text/css"> 
 
body{ 
 
margin:0; 
 
} 
 
.root { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 
.header { 
 
    width: 100%; 
 
    background-color: red; 
 
    display: flex; 
 
    height: 100px; 
 
    justify-content: space-between; 
 
    .logo-pane { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green; 
 
    } 
 
    .user-actions { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    } 
 
} 
 

 
.content { 
 
    flex-grow: 1; 
 
    background-color: pink; 
 
    height:100%; 
 
    width:100%; 
 
    position: fixed; 
 
} 
 

 
</style> 
 
</head> 
 

 
<body> 
 
<div class="root"> 
 
    <div class="header"> 
 
    <div class="logo-pane">Logo</div> 
 
    <div class="user-actions">User Actions</div> 
 
    </div> 
 
    <div class="content"> 
 
    content 
 
    </div> 
 
</div> 
 
</body> 
 

 
</html>

источник

2016-06-09 12:37:44 Mani

.root {height: 100%} ?? 100% чего? тело не определено по высоте :) в вашем коде –

.root i задал 100% высоты, а затем только .content займет .header + оставшееся пространство. – Mani

Ваш кодфель работает отлично. Я не понимаю, где вы застряли.

Вы можете основно построить свой шаблон из 2-х контейнеров: пример с header и main

html, 
 
body { 
 
    height: 100%;/* or just : 100vh; for body only */ 
 
    margin: 0; 
 
} 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    /* width and margin:auto is avalaible */ 
 
} 
 
header { 
 
    /* height: 50px;or do not set any and let grow from its content */ 
 
    background: gray; 
 
} 
 

 
main { 
 
    flex: 1;/* will fill up all space left */ 
 
    background: lightblue; 
 
    /* overflow:auto; optionnal if you do not want html to scroll and keep header fixed */ 
 
}

<header> 
 
    whatever <br/> sizes me 
 
    </header> 
 
    <main> 
 
    content 
 
    </main>

Сделать это просто, чтобы начать с :)

источник

2016-06-09 12:52:37

Установите :root в 100vh (100% высоты просмотра) вместо 100%

источник

2016-06-09 21:02:26

Элемент взять оставшуюся высоту окна просмотра

ответ

Смежные вопросы