Forums

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

Home › Forums › CSS › 100% Width but flexible height.

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 19, 2013 at 5:45 pm #147470
    Thadley
    Participant

    Hey guys,

    Sorry this is in “other discussion”, for some reason it wouldn’t let me post it in “css combat”. Alright so onwards to the question at hand.

    So I’m trying to figure out how to make the background color of a box 100% for example but I want the height to be flexible. The content that will be displayed on the color will most likely grow because it will end up being responsive. I need the color to follow the height of the content.

    I tried using :before/:after and having it hold the color. The position absolute removes it from its actual location and by that it wont follow the content if i’m correct.

    horrible explanation but any ideas?

    August 19, 2013 at 8:18 pm #147477
    jurotek
    Participant

    Can you make something on the CodePen so we can see what you talking about? If you set background color on div, it will always fill the entire height and width of the div regardless of whether the div is dimensioned with absolute or relative values.

    August 19, 2013 at 9:46 pm #147480
    Thadley
    Participant

    Here is the link. Example

    Basically, my body is 80% and I set to margin auto for it to be centered like most sites. Since my about section is within the body, the background color won’t be 100% of the window. It will be confined. The only way I know how to make it be 100% is putting it absolute 100% and sticking it to the left.

    Problem is if you resize the size of the browser for responsiveness, the content will stretch vertically but the color won’t. I know I set it to 200px but that’s because it wouldn’t show up otherwise. If I were to set the background color to the “about” or better yet the “content” div, it would definitely follow the size of the content but it would also be confined to the max size of 80% and not 100%.

    Know what I mean? @jurotek

    August 20, 2013 at 2:35 am #147501
    Paulie_D
    Member

    Seems to me you want something like this.

    http://codepen.io/Paulie-D/pen/oGKtA

    August 20, 2013 at 7:35 pm #147645
    Thadley
    Participant

    @Paulie_D Hey man, thanks. I had thought about something similar to this but this works. I just have to add the width and margin to every main element to center it rather than setting it to the whole body.

    Helpful :)

    August 21, 2013 at 12:14 am #147656
    Nishant
    Participant
    August 21, 2013 at 3:29 am #147669
    Paulie_D
    Member

    This might be more to your liking…same principle

    https://css-tricks.com/full-browser-width-bars/

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