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

Question

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

+--------------------+

|                    |

|                    |

|                    |

|                    |

|         1          |

|                    |

|                    |

|                    |

|                    |

+--------------------+

|                    |

|                    |

|                    |

|                    |

|         2          |

|                    |

|                    |

|                    |

|                    |

+--------------------+

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

вот пример моего 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%;}

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

536 8

html css height fill

8 ответов:

Comments

Ничего не найдено.

thgaskell · Accepted Answer · 2016-05-29 15:50:55

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

если вы плаваете #header, содержание с #someid будет вынужден обтекать его.

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

наконец, set #someid's высота до 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 должен установить это flex расти до значения больше, чем 0.
html, body, #full {
  height: 100%;
}

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

#someid {
  flex-grow: 1;
}

Serdalis · Accepted Answer · 2013-03-13 05:54:15

и 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, который я не снаружи.

Jonathan Graef · Accepted Answer · 2015-08-12 01:14:47

Это можно сделать с помощью таблицы:
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr height="0%"><td>
        <div id="full">
            
        </div>
    </td></tr>
    <tr><td>
        <div id="someid">
            
        </div>
    </td></tr>
</table>
затем применить css, чтобы сделать someid заполнить оставшееся пространство:
#someid {
    height: 100%;
}
В отличие от принятого ответа, который ничего не делает, кроме того, что делает контейнер div полной высотой страницы, это решение заставляет div #2 заполнить оставшееся пространство, как указано в вопросе. Если вам нужен этот второй div, чтобы заполнить всю высоту, отведенную ему, в настоящее время это единственный способ сделать это.

но не стесняйтесь доказать мне, что я ошибаюсь, конечно! CSS-это всегда лучше.

Ernesto Hegi · Accepted Answer · 2016-02-16 17:34:32

    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>

Ukuser32 · Accepted Answer · 2016-05-25 14:29:18

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

большинство сайтов уже используют Jquery и очень простой пример (для моего кода) это:
$('#auto_height_item').height($(window).height() - $('#header').height());
вы, очевидно, можете заменить окно и заголовок, и пусть основная математика делает работу. Лично я все еще не уверен в flex еще...

user4533280 · Accepted Answer · 2015-05-07 21:57:18

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

html:
<section id="secondary-foot"></section>
css:
section#secondary-foot {
    height: 100%;
    background-color: #000000;
    position: fixed;
    width: 100%;
}

H.A. · Accepted Answer · 2018-07-04 00:34:00

создайте div, который содержит оба divs (full и someid) и установите высоту этого div следующим образом:

высота: 100vh;

высота содержащих divs (full и someid) должна быть установлена в "auto". Вот и все.

Bogdan Dumitrescu · Accepted Answer · 2013-03-13 17:26:29

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

сделать большой div С :
top:0; 
bottom:0;
margin:0px auto; 
а внутри сделать 2 divС
height:50%; 
margin:0px auto;
Он очень похож на подход thgaskell, но он более гибкий и совместимый с CSS3. Вы можете попробовать объединить и протестировать его, чтобы увидеть, подходит ли он лучше всего на всех ориентациях и устройствах, которые вам нужны.