[Solved] Fullscreen div that grows with content - CSS-Tricks

This topic is empty.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts

June 17, 2014 at 6:31 am #172972

villan007

Participant

Hello all!

This is my first post and I hope someone can help me.

I want to use a fullscreen responsive slideshow for a microsite. However when I started to build and experiment I ran into problems of the content spilling out of the div.

Here is what I have so far….barebones stuff to expriment with.

CSS

     html, body {
            width: 100%;
            height: 100%;
            background-color: #793434;
            padding: 0;
            margin: 0;
        }
        
        div {
            height: 100%;
            width: 100%;
        }
        
        .test1 {
            background-color: #E3C42E;
        }
        
        .test2 {
            background-color: #B42626;
        }
        
        .test3 {
            background-color: #19D443
        }
        
        .top {
            background-color:black;
            width:100%;
            height:50%;
        }
        
        .bottom {
            background-color:grey;
            width:100%;
            height:50%;
        }

HTML

 <body>
    <div class="test1" id="one"><a href="#two">two</a></div>
    
    <div class="test2" id="two"><a href="#three">two</a></div>
    
    <div class="test3" id="three">
    
    <div class="top"><a href="#one">two</a></div>
    <div class="bottom"></div>
    
    </div>
    
    </body>

So I’ve got a few fullscreen divs that scroll to each other when you click the anchor.

If I put content into one div then when I got to small tablet or mobile size the content spilled over into the next slide. I changed the CSS to…..

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

div {
    width: 100%;
    min-height: 100%;
    height:auto;
    padding-bottom:2em;
}

.test1 {
    background-color: #E3C42E;
}

.test2 {
    background-color: #B42626;
}

.test3 {
    background-color: #19D443
}

.top {
    background-color:black;
    width:100%;
    height:50%;
}

.bottom {
    background-color:grey;
    width:100%;
    height:50%;
}

This gave me the result I wanted but left gaps between some of the DIVs.

So I’d like to know does anyone have a sloution for have a fullscreen div that grows when the content is increased.

Hope I’ve provided enough info.

Thanks

June 17, 2014 at 6:35 am #172973