Forums

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

Home Forums CSS [Solved] Fullscreen div that grows with content

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #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

    #172973
    Paulie_D
    Member

    Could you make a Codepen.io demo please…it’s much easier for us to debug than a codedump.

    #172976
    villan007
    Participant

    Sure no problem. Here you go http://codepen.io/anon/pen/reHDn

    When you shrink the browser the content flows over. Is there a way to make the div grow with the content?

    Thanks

    #172978
    Paulie_D
    Member

    Here you go. I just swapped out the height:100% for min-height on the divs

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

    #172979
    villan007
    Participant

    Great stuff! thanks a lot PD!

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