Set DIV для заполнения оставшейся высоты экрана

Кода:Set DIV для заполнения оставшейся высоты экрана

HTML

<body> 
    <header> 
     "..." 
    </header> 

    <main> 
     <div class="searchBox"> 
      <table> 
       "..." 
      </table> 
     </div> 

     <div class="tableData"> 
      <table> 
       "..." 
      </table> 
     </div> 
    </main> 
</body>

searchBox не важен. Я просто положил его туда, чтобы показать, что есть что-то выше моего другого стола (tableData).

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

Я исследовал и пришел через несколько решений, но ни один из них не похоже на работу:

1. Установить «В.Х.» свойство

Даже если это идет от размеров окна просмотра, это довольно хорошо. Тем не менее, у меня есть пользовательский интерфейс с вкладками со всеми вкладками, имеющими tableData, но в разных позициях на странице. Это означает, что переход от закладки к вкладке, tableData не успевает визуализировать новые измерения. Пример эскиз ниже:

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

2. используя абсолютное позиционирование

Я сразу же написал это от, как я также хочу, чтобы моя страница будет реагировать на различные устройства, и я понимаю, что с помощью абсолютное позиционирование может испортить что до

3. Flexbox

Я следовал за этот пост для этого метода: Make a div fill the height of the remaining screen space

Я попробовал этот подход, но он удалил все мои другие CSS я имел на странице.

Каков наилучший способ достичь того, что я хочу?

источник

2015-10-07 wmash

Что значит "он удалил все мои другие CSS" означает? Вы пробовали другие ответы из этого вопроса, например [css tables] (http: // stackoverflow.com/a/16960823/1529630) или ['calc()'] (http://stackoverflow.com/a/23323175/1529630)? – Oriol

Удалил все остальные стили на моей странице. Я попытался применить CSS подход и не имел никакого значения. Я не пробовал 'calc()', поэтому попытаюсь сделать это – wmash

Возможный дубликат [Сделать div заполнить высоту оставшегося экрана] (http://stackoverflow.com/questions/90178/make-a-div-fill -the-height-of-the-still-screen-space) – chrisweb

Если вы хотите, чтобы создать высоту вашего divs с %'s, то все, что вам нужно сделать, это установить ваш html в 100%.

Вот как это сделать:

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

#searchBox { 
    background-color: red; 
    width: 100%; 
    height: 20%; 
} 

#tableData { 
    background-color: blue; 
    width: 100%; 
    height: 80%; 
}

Вот jsfiddle.

Update
добавил margin: 0; к html и body и обновил jsfiddle

источник

2015-10-07 19:04:06 Anthony

Я действительно пробовал это. 'Html' и' body' работали так, как предполагалось (высота экрана), но 'tableData' выходил за пределы тела и снова растягивался. – wmash

может уменьшить процент' высоты' 'html'? – Anthony

Казалось, что это действительно сработало. Спасибо – wmash

Set DIV для заполнения оставшейся высоты экрана

ответ

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