Make Text Height 100% of Div

Make text height 100% of div?

To get the result I wanted, I had to use this code:

// Cache the div so that the browser doesn't have to find it every time the window is resized.
var $div = $('li.leaf.item');

// Run the following when the window is resized, and also trigger it once to begin with.
$(window).resize(function () {
   // Get the current height of the div and save it as a variable.
   var height = $div.height();
   // Set the font-size and line-height of the text within the div according to the current height.
   $div.css({
      'font-size': (height/2) + 'px',
      'line-height': height + 'px'
   })
}).trigger('resize');

Thank you joshuanhibbert@css-tricks for the help!

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

Div height 100% and expands to fit content

Here is what you should do in the CSS style, on the main div

display: block;
overflow: auto;

And do not touch height

CSS - font size 100% of the containing div (element)

This is not possible with pure CSS. You have 4 options:

1) Define the font size for certain breakpoints, to fill up as much as the container as possible, cross browser/platform.

2) Use Viewport Percentage Units: vw as described in this SO answer

3) Use a JS library to fill the text of the parent container, eg:

BigText
FitText

4) Apply a font size that fits the container well, maybe tweak it after 600px +; and live with the fact the font won't fit exactly 100% of the container.

I recommend no.4 for your specific requirment - there will be no JS dependancy, it's simplest to apply and it won't make that much of a difference for your requirement. Maybe the form would look better if you align the text to the left as well. I think no1 and 2 are a bit of an overkill.

Font size decreasing in div set to height 100%

You're making a responsive website but you haven't configured the viewport. Great link here about it but essentially:

Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen.

So with your 100% height and Chrome's device mode rendering that height as a lot bigger than it is, you got the small text.

Adding the following to the head will make your site display properly on a mobile device:

<meta name="viewport" content="width=device-width, initial-scale=1" />

However, you'll need to make some changes as your 100px margin either side on your body squishes your content into a slim column.

Text overflowing out of 100% height and 100% width div

* {  margin: 0;}body {  background-color: green;}html,body {  height: 100%;}.left {  display: flex;  flex-flow: row wrap;  align-items: center;  justify-content: space-around;  order: 1;  width: 45%;}.middle {  display: flex;  flex-flow: column wrap;  order: 2;  width: 45%;  height: 100%;}.list ul {  list-style: none;  padding: 0;}.list a {  text-decoration: none;  color: inherit;}#bigwrap {  height: 100%;}.container {  display: flex;  position: relative;  flex-flow: row wrap;  justify-content: space-around;  align-items: stretch;  height: 100vh;  width: 80%;  margin: 5% auto 8% auto;  background-color: white;}.middle p:first-child {  margin-top: 8%;}.list ul {  list-style: none;  padding: 0;}.list a {  text-decoration: none;  color: inherit;}li {  list-style-type: none;  font-size: 18px;}.lihead {  font-size: 24px;  margin-bottom: 1%;}.stuff {  background-color: white;  margin: auto;  width: 70%;}.stuff ul li {  margin-bottom: 2%;}.center {  text-align: center;}.center1 {  text-align: center;  color: green;  font-size: 28px;}.tpoint {  font-size: 24px;  color: orange;}.mtop {  margin-top: 2%;}a {  text-decoration: none;  color: orange;}.foot {  display: flex;  flex-flow: row wrap;  justify-content: center;}.foot div {  margin-right: 1%;}.container .box {  border: 2px solid red;}@media all and (max-width: 900px) {  #bigwrap {    width: 100%;  }  .container {    flex-flow: row wrap;    min-height: 100vh;    width: 100%;    height: auto;  }  .left,  .right {    flex: 1 100%;  }  .middle {    flex-flow: row wrap;    flex-grow: 1;    flex-shrink: 1;    justify-content: center;  }  .box {    width: 70%;    text-align: center;  }  #header2 {    justify-content: space-around;  }}@media (min-width: 900px) and (max-width: 1100px) {  #nav {    justify-content: space-around;  }  .container {    width: 100%;  }}

<div id="bigwrap">  <div class="container">    <div class="left">      <img src="eggs.jpg" width="209" height="205" alt="Picture of kid" />      <img src="benedict.jpg" width="209" height="205" alt="Picture of kid">    </div>    <div class="middle">         <div class="box">        <h2> Sample list </h2>      </div>      <div class="box">        <p>          Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.          Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample          sentence. Sample sentence. Sample sentence. Sample sentence.        </p>      </div>      <div class="box">        <p>          Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.          Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample          sentence. Sample sentence. Sample sentence. Sample sentence.        </p>      </div>     </div>  </div> <!--end of container-->   <div class="stuff">    <p class="center1">Sample sample</p>    <p class="center tpoint">Sample Food</p>    <ul>      <li>Sample Mr.Sample        <ul>          <li>Samples</li>          <li>Sammple</li>        </ul>      </li>      <li>Sample        <ul>          <li>Sample</li>          <li>Sample</li>        </ul>      </li>      <li>Eggs        <ul>          <li>Sampl;e</li>          <li>Sample</li>        </ul>      </li>      <li>Sam        <ul>          <li>Sample</li>          <li>List</li>        </ul>      </li>      <li>Lists        <ul>          <li>Lists</li>          <li>Lists</li>        </ul>      </li>         </ul>    <p class="center tpoint">List</p>    <ul>      <li>List        <ul>          <li>List</li>        </ul>      </li>      <li>Sample</li>      <li>List</li>      <li>Ss</li>      <li>Samples</li>      <li>List</li>      <li>This is a sample</li>      <li>This is a sample</li>    </ul>    <p class="center tpoint">Sam</p>    <ul>      <li>Sample        <ul>          <li>Samples</li>        </ul>      </li>      <li>More samples        <ul>          <li>This is a sample</li>        </ul>      </li>    </ul>  </div> <!--end of stuff--> </div> <!--end of bigwrap-->

Vertically center text in a 100% height div?

This answer is no longer the best answer ... see the flexbox answer below instead!

To get it perfectly centered (as mentioned in david's answer) you need to add a negative top margin. If you know (or force) there to only be a single line of text, you can use:

margin-top: -0.5em;

for example:

http://jsfiddle.net/45MHk/623/

//CSS:
html, body, div {
    height: 100%;
}

#parent
{
    position:relative;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
    /* adjust top up half the height of a single line */
    margin-top: -0.5em;
    /* force content to always be a single line */
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
}

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>

The originally accepted answer will not vertically center on the middle of the text (it centers based on the top of the text). So, if you parent is not very tall, it will not look centered at all, for example:

http://jsfiddle.net/45MHk/

//CSS:
#parent
{
    position:relative;
    height: 3em;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
} 

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>

Make Text Height 100% of Div