Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

CSS Question: Stretch Element to Bottom of Page?

edited February 2014 in Help! with 1.x
Quick CSS question. Sugarcane format. I want my passage to extend to the bottom of the page, but not 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, obviously.

I have an outline (outline-width:1px; outline-offset: -9px), but I can just take it off the bottom.

Example:
__________
| ______ |
| | | |
| | | |
Thanks!


EDIT: Attached 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

Comments

  • Okay, I can get the job done in Chrome and Internet Explorer, but not Firefox, using CSS/HTML hand-typed in Notepad. Strange, because it should work in Firefox too.
    <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>
    However, though I added min-height: 100% to #passages, .passage and body, I cannot get this to work in Twine.

    Suggestions?

    Breaker, breaker! Come back to me, over!
  • Setting "height" instead of "min-height" works for me in Firefox.
  • Gah! I've had every combination and never had the right one with the right browser. XD

    Thanks!

    You're right, that does work. :)

    However, did you get it to work with Twine? Here's my stylesheet:
    body {
    background-color: black;
    height: 100%;
    min-height:100%;
    }

    #passages {
    height: 100%;
    min-height:100%;
    }

    .passage {
    color: lime;
    border-style:solid;
    border-width:1px;
    border-color: lime;
    width: 60%;
    min-width: 640px;
    height: 100%;
    min-height: 100%;
    padding: 2%;
    margin-top: 5%;
    margin-right: auto;
    margin-left: auto;
    font-size: 200%;
    font-family: sans-serif;
    background-color: black;
    }
    Didn't work in Chrome, IE or Firefox for me.
  • I didn't try in Twine, I used your plain HTML file.

    In your style sheet, does anything match ".passage"? Why not put everything inside the "#passages" block?

    By the way, Firefox' built-in developer tools are quite useful for debugging CSS. Right-click, then pick "Inspect Element". You can then navigate to an HTML tag in the tree view or you can select one visually with the mouse and see what CSS applies to that tag, including all inherited styles, in the Rules tab.
  • mth wrote:
    In your style sheet, does anything match ".passage"? Why not put everything inside the "#passages" block?


    That's the entire stylesheet above. Also, I attached the TWS and HTML file.

    Copying the code into #passages doesn't fix the issue. Other than what the wiki says, I don't really know much of a difference, but when #passages is used, the text and everything else "grows" from whatever Sugarcane's default is, and also some of the different transitions aren't "smooth" if that's the right word. Some other issues arise as well. Like I say, it doesn't fix the issue anyway, just causes new and different problems. That's why it's in .passages instead of #passages.
  • Doing
    html, body {height: 100%;}
    will get you a lot closer to what you want (giving "html" 100% height too). You might try removing bottom margins and padding from everything to see if that gets rid of the remaining space at the bottom.

    Answer cribbed from answer #2 here.

    CSS is weird sauce.
  • Thanks, Looper! :)

    I'm going crazy. I opened my little test HTML file to edit it and add "html, body", but it goes all the way down, so that's not an issue . . .

    However, you were on to something with Twine. It now extends down nearly to the bottom. However, it causes a strange glitch . . .

    I don't have time to work on it at the moment. The outline is understandable as it is offset -9px, but I'm not sure why the passage baground-color (the translucent black) stops short. ??? Attached is a screenshot (the bottom is my Windows taskbar).

    Maybe playing around with what code is in #passages vs. what's in .passage will take care of it, but I'm busy so I can't test.


    EDIT: When I change .passage's width from "100%" to "auto", it fixes the above problem. However, it scrolls so slow in Firefox (but not in Chrome or IE) I wonder if it's even scrolling at all until it finally catches up. I'm running a fast system, too. It also seems to "re-draw" itself when scrolling no matter the browser. It's super clunky. When you first scroll down, the passage doesn't go all the way to the bottom, then it suddenly shoots down. After that, it can barely scroll. Chrome and IE are faster, but scrolling still isn't smooth. In the plain HTML file I wrote, it's just fine. In Twine, something is wrong.

    I got to thinking, maybe I'm going about the wrong. If there is no text, I don't want the player to need to scroll down. maybe I want a background image rather than have the .passage have the dark shading . . . Maybe that's crazy talk.

    Gah! If only this were pure CSS rather than having to fight Sugarcane, I could take this to CSS forums. But, it works perfectly in plain HTML now. So frustrating. I'd rather be writing.
  • I'm at work so I can't really play-test this right now (not that I'm a guru at this, far from it) but, visually, from your screenshot, what it looks like is that the text (and maybe some elements) are overflowing a container element, whereas the black background color is not. In this instance it would be very useful to do as mth suggested and use Firefox's developer tools to examine which elements are where on your page. This will help you debug the CSS, 'cause you'll be able to see which elements are shorter or longer than you expected, and whether or not the text is indeed overflowing (which is a technical term, and which I mean in a technical way, without having a full grasp of what it means. Heh.).
  • Hey, after adding min-height and height 100% to the html selector in your CSS passage in your tws file as discussed previously, and *also* removing the padding and margin from .passage, .passage now goes all the way to the bottom. #passages does too. There's no need to change width to "auto," or to change width at all really.

    Remove the padding and margin from .passage like so:
    .passage {padding: 0; margin-bottom: 0;}
    You could also do padding-bottom instead of padding if you wanted.

    You can also specify sides like this:

    padding: 2% 2% 0% 2%;
    The first value is top, the second is right, the third is bottom, the last is left. Like moving around a clockface going clockwise and starting at 12:00.

    I'm sortof winging that last bit of code a bit, but that should be right. I know the order of specifying the sides is right.
Sign In or Register to comment.