The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Stretch Element to Bottom of Page?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #162720
    body {
      background-color: black;
    .passage {
      color: lime;
      border-color: lime;
      width: 60%;
      min-width: 640px;
      min-height: 100%;
      padding: 2%;
      margin-top: 5%;
      margin-right: auto;
      margin-left: auto;
      font-size: 200%;
      font-family: sans-serif;
      background-color: black;
    <div class="passage">

    I’m very new to HTML and CSS. I’d like my passage element to go all the way to the bottom of the screen no matter the resolution. I don’t want to force a fixed height for a number of reasons. I tired to use min-height:100% on the body and on the element, but that didn’t work.


    EDIT: Actually, it sorta works in Chrome and IE, but not at all in Firefox. In Chrome and IE, it still leaves a little bit of space at the bottom.

    Can I fix this in Firefox?

    How do I get that last little bit removed so the element goes ALL the way down to the bottom?

    Thanks again!

    EDIT x2: Adding Height: 100% in addition to the min-height:100% seems to fix the issue in Firefox. Still a bit of space at the bottom, though.


    Still a bit of space at the bottom, though.

    That’s probably just some default padding / margin.

    A good reset.css will probably fix it.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.