<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>
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.
Thanks!
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.
