Дайте телу 100% высоты браузера

У меня есть это:Дайте телу 100% высоты браузера

Я хочу это:

Я попытался это:

html, body 
{ 
    height: 100%; //and this -> 100vh 
}

но не работает.

Вот мой код:

https://jsfiddle.net/zbjaaxe6/9/

Любые решения?

источник

2015-10-11 userfloflo

Вы пытались предоставить контейнер 'height: 100%' - https://jsfiddle.net/61eguhw4/ –

'' из ниоткуда в вашем HTML ... Вероятно, ошибка копирования-вставки. Ваш вопрос имеет смысл. Вы просите «тело» 100% высоты! –

См. CSS: https://jsfiddle.net/zbjaaxe6/18/ –

«С Vw/ВХ, мы можем элементы размером до по отношению к размеру окна просмотра .Участки vw/vh интересны тем, что 1 единица отражает 1/100th> ширину окна просмотра. Чтобы сделать элемент полной шириной окна t, например, вы установили бы его ширину: 100vw."

- Jonathan Snook, проклейка с CSS3 в VW и VH Units

CSS:

[class*="col"] { 
    border: 1px solid black; 
} 

#menu{ 
    display:none; 
    margin-top:20px; 
    position:absolute; 
    background: #fff; 
    z-index: 1; 
} 

body { 
    font: caption; 

} 

#content{ 
    min-height: 90vh;  
} 

#footer{ 
    min-height: 5vh;  
} 

#header{ 
    min-height: 5vh;  
}

HTML:

<div class="container"> 
    <div class="row"> 
      <!-- Small devices >= 768px Collapsed to start, horizontal above breakpoints --> 
      <div id = "header" class="col-xs-10"><span id="btnMenu" class="glyphicon glyphicon-menu-hamburger" aria-hidden="true">TITLE</div> 
      <div id="menu" class="col-xs-3 menu"> 
       MENU 
      </div> 
      <div id="content" class="col-xs-10 content"> 
       </span>CONTENT 
      </div> 
      <div class="col-xs-10" id = "footer">FOOTER</div> 
    </div> 
</div>

источник

2015-10-11 17:38:43

Не идеально, но вы можете использовать абсолютное позиционирование:

.content { 
    position: absolute; 
    top: 20px; 
    bottom: 0; 
}

Или, вы можете использовать окно просмотра в проценты, если вы круты с поддерживающими IE9 +:

.content { 
    height: 100vh; 
}

стилями должны быть по содержанию раздел, а не html/body.

EDIT: fiddle

источник

2015-10-11 17:26:56 Clark

Я хочу, чтобы заголовок + контент + нижний колонтитул занимал 100% страницы, а не только часть контента , Мне не нужна полоса прокрутки. – userfloflo

Посмотрите ответ @Michael P. Bazos ниже - flexbox станет отличным решением, если вам не нужна устаревшая поддержка браузера. – Clark

Я не знаю, если это то, что вы хотите, но посмотрите: https://jsfiddle.net/zbjaaxe6/23/

.content{ 
position: relative; 
margin: 0; 
min-height: 100vh; 
}

источник

2015-10-11 17:32:25

Я хочу, чтобы заголовок + контент + нижний колонтитул занимал 100% страницы, а не только часть контента. Мне не нужна полоса прокрутки. – userfloflo

Эта проблема является хорошим кандидатом для flex коробка:

CSS

body { 
    display: flex; 
    flex-direction: column; 
    margin: 0; 
    min-height: 100vh; // set min-height instead of height, otherwise body won't 
         // grow with content, if content is bigger than viewport 
} 

header { 
    height: 50px; // adjust to what you want 
} 

main { 
    flex: 1;  // This will make the 'main' block to expand ! 
} 

footer { 
    height: 30px; // adjust to what you want 
}

HTML

<body> 
    <header>HEADER</header> 
    <main>MAIN</main> 
    <footer>FOOTER</footer> 
</body>

Результат:

Fiddle
Flexbox - это решение IE10 +. Browser support in detail

источник

2015-10-11 17:43:45

Я решил вашу проблему, используя свойство flexbox.

.container, 
.row { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 
#title, 
#footer { 
    flex: none; 
} 
#content { 
    flex: 1 0 auto; 
}

Вы можете увидеть here решение.

источник

2015-10-11 17:47:00 marisaroque

Дайте телу 100% высоты браузера

ответ

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