Как заполнить 100% оставшейся высоты?

+--------------------+ 
|     | 
|     | 
|     | 
|     | 
|   1   | 
|     | 
|     | 
|     | 
|     | 
+--------------------+ 
|     | 
|     | 
|     | 
|     | 
|   2   | 
|     | 
|     | 
|     | 
|     | 
+--------------------+

Содержание (1), как показано выше, неизвестно, так как оно может увеличивать или уменьшать динамически генерируемые страницы. Второй div (2), как показано выше, должен заполнить оставшееся пространство.Как заполнить 100% оставшейся высоты?

вот пример моего HTML

<div id="full"> 
<!--contents of 1 --> 
<div id="someid"> 
<!--contents of 2 --> 
</div> 
</div>

Css ...

#full{width: 300px; background-color: red;} 
#someid{height: 100%;}

Или этот метод не так? Как мне это сделать? см. Мой demo и покажите мне свою ошибку.

источник

2013-03-13 Bhojendra Nepal

Вы хотите, чтобы высота 1 + 2 была точной высотой области просмотра? Или 2 имеет тот же размер, что и окно просмотра, и он прокручивается до высоты 1? – thgaskell

height of 1 Я не знаю, и оставшиеся 1, а затем 2 будут полной высоты. –

@ C-Link Что вы подразумеваете под 'height: 100%'? Вы имеете в виду, что div должен занимать оставшуюся высоту? –

Вы должны быть в состоянии сделать это, если вы добавите в DIV (#header ниже), чтобы обернуть содержимое 1.

Если вы плаваете #header, содержание от #someid будет вынужден обтекать Это.
Далее вы устанавливаете ширину #header на 100%. Это расширит его, чтобы заполнить ширину содержащего div, #full. Это будет эффективно подтолкнуть все содержимое #someid ниже #header, так как больше нет места для течения по сторонам.
Наконец, установите высоту #someid на 100%, это будет иметь ту же высоту, что и #full.

JSFiddle

HTML

<div id="full"> 
    <div id="header">Contents of 1</div> 
    <div id="someid">Contents of 2</div> 
</div>

CSS

html, body, #full, #someid { 
    height: 100%; 
} 

#header { 
    float: left; 
    width: 100%; 
}

Обновление

Я думаю, что стоит упомянуть, что flexbox хорошо поддерживается в современных браузерах сегодня.CSS может быть изменен, поскольку #full превращается в гибкий контейнер, и #someid должен установить, что его гибкость растет до значения больше 0.

html, body, #full { 
    height: 100%; 
} 

#full { 
    display: flex; 
    flex-direction: column; 
} 

#someid { 
    flex-grow: 1; 
}

источник

2013-03-13 04:36:59 thgaskell

, пожалуйста, мой мой ** [demo] (http://jsfiddle.net/Y7PhV/99/) и исправить его там, где ошибка , –

Я думаю, что вы правы, но моя проблема не может быть решена, но в любом случае это помогло мне разобраться в этом. Поэтому я принимаю ваш ответ. –

Ваш ответ работает красиво, но я немного смущен, почему он работает: если вы играете с цветами фона, вы можете видеть, что '# someid' ВСЕГДА равно высоте' # full', несмотря на высоту ' # header'. По логике, содержимое '# someid' должно начинаться с вершины' # full'. Почему '# header' толкает контент вниз? –

Чтобы получить div до 100% высоты на странице, вам нужно будет установить каждый объект по иерархии выше div на 100%. например:

html { height:100%; } 
body { height:100%; } 
#full { height: 100%; } 
#someid { height: 100%; }

Хотя я не могу полностью понять ваш вопрос, я предполагаю, что это то, что вы имеете в виду.

Это пример я работаю с:

<html style="height:100%"> 
    <body style="height:100%"> 
     <div style="height:100%; width: 300px;"> 
      <div style="height:100%; background:blue;"> 

      </div> 
     </div> 
    </body> 
</html>

Style просто замена для CSS, который я не экспортирована.

источник

2013-03-13 03:48:22 Serdalis

Извините! этот метод не работает. Я уже сделал это. –

Какой элемент вы хотите быть на 100% высотой? и по отношению к чему? – Serdalis

(2) должен быть 100% высоты. Ваш метод может работать без оболочки, но я использую обертку. –

-2

Если ваши пробелы нужно исправить точно границы экрана, вы можете попробовать

сделать большой div с:

top:0; 
bottom:0; 
margin:0px auto;

и внутри сделать 2 div с с

height:50%; 
margin:0px auto;

Он очень похож на подход thgaskell, но он более гибкий совместимый с CSS3. Вы можете попробовать слить и протестировать его, чтобы убедиться, что он подходит лучше всего на всех ориентациях и устройствах, которые вам нужны.

источник

2013-03-13 14:55:13

Я добавил это для страниц, которые были слишком короткими.

HTML:

<section id="secondary-foot"></section>

CSS:

section#secondary-foot { 
    height: 100%; 
    background-color: #000000; 
    position: fixed; 
    width: 100%; 
}

источник

2015-05-07 18:57:18 user4533280

Я пробовал это в JSFiddle @ BhojendraNepal, но не смог заставить его работать. Не могли бы вы показать в своем собственном JSFiddle или описать, где вы добавили свой элемент? –

Это может быть сделано с помощью таблиц:

<table cellpadding="0" cellspacing="0" width="100%" height="100%"> 
    <tr height="0%"><td> 
     <div id="full"> 
      <!--contents of 1 --> 
     </div> 
    </td></tr> 
    <tr><td> 
     <div id="someid"> 
      <!--contents of 2 --> 
     </div> 
    </td></tr> 
</table>

Затем примените CSS, чтобы сделать someid заполнить оставшееся пространство:

#someid { 
    height: 100%; 
}

Теперь я могу только услышать сердитые крики из толпы: «Ой, он использует столы! Подайте его львам! »Пожалуйста, выслушайте меня.

В отличие от принятого ответа, который не выполняет ничего, кроме того, что контейнер div div не превышает полную высоту страницы, это решение делает div # 2 заполнением оставшегося пространства, как указано в вопрос. Если вам нужно, что второй DIV, чтобы заполнить всю высоту отведенного на него, это в настоящее время единственный способ сделать это.

Но не стесняйтесь, чтобы доказать меня неправильно, конечно! CSS всегда лучше.

источник

2015-08-11 22:14:47

html, 
 
    body { 
 
     height: 100%; 
 
    } 
 

 
    .parent { 
 
     display: flex; 
 
     flex-flow:column; 
 
     height: 100%; 
 
     background: white; 
 
    } 
 

 
    .child-top { 
 
     flex: 0 1 auto; 
 
     background: pink; 
 
    } 
 

 
    .child-bottom { 
 
     flex: 1 1 auto; 
 
     background: green; 
 
    }

<div class="parent"> 
 
     <div class="child-top"> 
 
      This child has just a bit of content 
 
     </div> 
 
     <div class="child-bottom"> 
 
      And this one fills the rest 
 
     </div> 
 
    </div>

источник

2016-02-15 12:32:42

Не могли бы вы немного подробнее рассказать об этом кодовом ответе? Благодаря! – arkascha

Привет, @arkascha, я только что обновил свой пост с примером рабочего кода. Спасибо за предложение. Приветствия. –

Я знаю, что это поздняя запись, но даже в 2016 году я удивлен полным отсутствием поддержки IE для flex (в настоящее время 11 - это единственная, кто ее поддерживает, и ее основная ошибка на этом), которая с точки зрения бизнеса не хорошо! Поэтому я думаю, что до тех пор, пока IE не отключит лучшее решение, и для большинства браузеров, безусловно, должен быть JS/Jquery?

Большинство сайтов уже используют Jquery и очень простой пример (для моего кода) является:

$('#auto_height_item').height($(window).height() - $('#header').height());

Вы можете, очевидно, заменить окна и заголовок, и пусть основная математика сделать работу. Лично я все еще не уверен в гибкости ...

источник

2016-05-25 11:29:18 Ukuser32

Как заполнить 100% оставшейся высоты?

ответ

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