2 replies [Last post]
Sharpe
Sharpe's picture
Offline
newbie
Last seen: 6 years 20 weeks ago
Timezone: GMT-6
Joined: 2014-02-12
Posts: 2
Points: 3

Greetings!

What I have is a quick and easy CSS question, I think, but I'm having trouble wording it. I don't know enough CSS or HTML to easily ask the question, let alone search for its answer.

I have, like, the body and an element called .passage. The passage is where everything is displayed. It's centered in the middle of the body. I want my passage to extend all the way to the bottom of the page, but not to the top. Say there is a margin of, like 5% or whatever at the top, but the passage height continues downward the entire length of the vertical resolution.

Setting "min-height: 100%" seems to do nothing and setting "height: 100%" doesn't work because it will only extend as long as the contents require. I don't want to set a fixed height for a number of reasons. My body has a min-height: 100% too.

I have an outline (outline-width:1px; outline-offset: -9px, which doesn't work in Internet Explorer because potato), but I can just take it off the bottom.

Example:

 __________
| ______  |
| |     | |
| |     | |

Below is a pic. I'd like the shaded area (.passage) to continue down to the bottom of the screen no matter the screen resolution or how much content is in the passage. I'll then remove the gold outline form the bottom, if needed.

http://imagizer.imageshack.us/v2/1280x1024q90/854/nm6i.png

Thanks a lot!

—Sharpe

Sharpe
Sharpe's picture
Offline
newbie
Last seen: 6 years 20 weeks ago
Timezone: GMT-6
Joined: 2014-02-12
Posts: 2
Points: 3

Sorry for the double post

Sorry for the double post (though this isn't a bump since there are no posts above this one and the last post to this forum was more than 11 hours ago), but I could not for the life of me figure out how to edit or modify my above post.

Here is a sample code:

<html>
<head>
<style>
body {
  background-color: black;
  min-height:100%;
}
.passage {
  color: lime;
  border-style:solid;
  border-width:1px;
  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;
}
</style>
</head>
<body>
<div class="passage">
Hello!
</div>
</body>
</html>

That's basically all of it.

My jaw dropped open when I opened it in both IE and Chrome and it worked (EDIT: Actually, I noticed there is a small margin at the bottom... Sad ). So, just Firefox doesn't recognize min-height or something? CanIUseIt.com seems to indicate that should not be the problem: http://caniuse.com/minmaxwh

What should I do?

Thanks again!

EDIT: Okay, adding "width: 100%" in addition to the "min-width: 100%" fixes the problem in Firefox.

However, there is still a bit of space down at the bottom . . .

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Sharpe, Try margin:0; on

Hi Sharpe,
Try margin:0; on body.