CODEWITHSUNDEEP
htmlcss
John Abraham
John Abraham

Reputation: 18791

Overflow issues with height:100%;

LIVE CODE
I'm trying to have my maincontent div class="mc" just appear on the bottom 10% of the screen. Allowing users to view as much of the background image as possible and still allow the user to see the title of the article.

My solution was to set a .mc to 100% height and subtract that from the bottom of the viewports size. all done in css

CSS

.mc { 
    height:100%; 
    width:100%; 
    background:#fff; 
    z-index:1; 
    position:absolute; 
    bottom:-90%;
}

My problem: When content goes larger then 100% height it falls into a void. I tried min-height; unfortunatly it breaks the code even worse. Scroll to the bottom of LIVE CODE to see the problem

or

ERROR'd picture (you can tell it ends from the .box-shadow();)

enter image description here

Here's the way it should look heres a simple mock up

HTML

<article class="mc">
<section class="cc">
    <div class="margin_wrapper">
        <header>
            <hgroup>
                <h1 class="at">rocking grass out styles for everyone.</h1>
                <h2 class="ast">The you mice structure for to of almost ability an trying the when designer
                    dissolute that constructing in quickly distinct...</h2>
            </hgroup>
        </header>
        <h3 class="title_header">the good</h3>
        <p>...</p>
        <h3 class="title_header">the bad</h3>
        <p>...</p>
        <h3 class="title_header">the ugly</h3>
        <p>...</p>
    </div>
</section>
<aside></aside>

Upvotes: 0

Views: 100

Answers (1)

Ricardo Souza
Ricardo Souza

Reputation: 16456

You can put the text container beloow the image and use a negative top margin or negative top with position: relative to position the content:

margin-top: -10%;

or

position: relative;
top: -10%;

This last method will leave a blank space below the content to the size of the reposition.

Upvotes: 1

Related Questions