Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Joseph Greco
Joseph Greco
13,405 Points

Have DIV always fill 100% of its parent DIV.

I'm using bootstraps grid system to organize 6 divs. 

<div class="container-fluid tour">
        <div class="row dates">
            <div class="col-xs-12 col-sm-6 col-md-4">
              <div class="date">
                <p>12 | 10 | 2016</p>
                <h3>KROQ ALMOST ACOUSTIC CHRISTMAS 2016</h3>
                <p>Los Angeles, California</p>
                <button class="btn"type="button" name="button">Buy Tickets</button>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4">
              <div class="date">
                <p>01 | 12 | 2017</p>
                <h3>NATIONAL HARBOR</h3>
                <p>National Harbor, Maryland</p>
                <button class="btn"type="button" name="button">Buy Tickets</button>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4">
              <div class="date">
                <p>01 | 13 | 2017</p>
                <h3>TD GARDEN</h3>
                <p>Boston, Massachusetts</p>
                <button class="btn"type="button" name="button">Buy Tickets</button>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4">
              <div class="date">
                <p>01 | 16 | 2017</p>
                <h3>AIR CANADA CENTRE</h3>
                <p>Toronto, Ontario, Canada</p>
                <button class="btn"type="button" name="button">Buy Tickets</button>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4">
              <div class="date">
                <p>01 | 19 | 2017</p>
                <h3>WELLS FARGO CENTRE</h3>
                <p>Philadelphia, Pennsylvania</p>
                <button class="btn"type="button" name="button">Buy Tickets</button>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4">
              <div class="date">
                <p>01 | 20 | 2017</p>
                <h3>MADISON SQUARE GARDEN</h3>
                <p>New York, New York</p>
                <button class="btn"type="button" name="button">Buy Tickets</button>
              </div>
            </div>
          </div>
        </div>

Here is my scss. 

.dates{
    display: inline-block;
      .date{
        margin:  5px auto;
        position: relative;
        padding: 5px;
        height: ???<--
        width: ??? <--
        background: rgba($lightpink, .7);
        p{
          color: $white;
          font-weight: 100;
          margin: 15px;
          font-size: 120%;
        }
        h3 {
          color: $white;
          letter-spacing: 0.2rem;
        }
        .btn{
          display: block;
          position: absolute;
          width: 90%;
          left: 50%;
          margin-left: -45%;
          margin-bottom: 15px;
          bottom: 0;
          border-radius: 0;
          background: $pink;
          border: 1px solid $white;
          color: $white;
          font-weight: 100;
          letter-spacing: .4rem;
            &:hover{
              background: $white;
              border: 1px solid $pink;
              color: $pink;
            }
        }
      }
    }
  }

If I set fixed a fixed height and width for the .date div, the divs are centered and they look OK, however there is alot of extra space between them at different screen sizes. I've tried setting both my height and width to 'inherit', '100%', 'auto', but this results in odd behaviour where the divs become all disproportioned. I think its breaking to containing box or something.

I want to have the inner .date divs to always fill 100% of its parent column divs.

Does anyone know how I can achieve this?

1 Answer

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

:point_right: Some Bootstrap components have default margins and/or padding.

You'll have to override all the default margins and padding if you want to use all possible space inside your containers.