Menu icon Foundation

My Posts









  • 8
    Replies
  • 100% height column

    By hector_sapien

    100%heightdivcolumn

    Hi everybody! I have two centered columns and both have content at the top. The columns have a different background color and I would like them to stretch to the bottom of the viewport. My problem is that the columns ends where the content ends. I... (continued)

    Last Reply by Elles pallin over 3 years ago


My Comments

hector_sapien commented on hector_sapien's post over 3 years

I just noticed this isn't 100% working because I do have some horizontal scrolling.

hector_sapien commented on hector_sapien's post over 3 years

Nice and creative solution!
Thanks!

hector_sapien commented on Travis Fulton's post over 3 years

Confirmed, I've got this working too! :)

hector_sapien commented on hector_sapien's post over 3 years

Ok, i've found the issue. Al dynamically added styles are removed in the build for production process by UnCSS.
If I remove the UnCSS process from the gulpfile, all issues are gone.

hector_sapien commented on hector_sapien's post over 3 years

Thanks Rafi, good article!

hector_sapien commented on hector_sapien's post over 3 years

Thanks. I'm running the latest version (6.1.1)
Anybody have any ideas why my build fail, or have the same issues?

hector_sapien commented on Travis Fulton's post over 3 years

I'm having the same issue. I can do 1 or maybe 2 saves in a partial, the I need to restart the 'watch' process.

hector_sapien commented on hector_sapien's post almost 5 years

Thx Rafi,

For some reason, adding relative positioning to the containing div didn't work.
And since the buttons got absolute positioning they were taken out of the flow and started overlapping the above paragraph.

I solved this by adding some bottom padding to the element above the buttons.

 <div class="row" data-equalizer>
      <div class="small-12 medium-4 columns panel" data-equalizer-watch>
      <div class="mybox">
        <p>Lorem ipsum dolor sit amet, quis ocurreret expetendis at eos, pro et alii soluta ornatus. Inermis adipiscing vis cu, ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. </p>
        <a href="#" class="button small radius">Button 1</a>
      </div>
      </div>
      <div class="small-12 medium-4 columns panel" data-equalizer-watch>
      <div class="mybox">
        <p>Lorem ipsum dolor sit amet, quis ocurreret expetendis at eos, pro et alii soluta ornatus. Inermis adipiscing vis cu, ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. Eos antiopam iudicabit vituperata te, unum harum feugiat vel eu, ludus regione vivendum mea eu.</p>
        <a href="#" class="button small radius">Button 2</a>
      </div>
      </div>
      <div class="small-12 medium-4 columns panel" data-equalizer-watch>
      <div class="mybox">
      <p>Ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. Eos antiopam iudicabit vituperata te, unum harum feugiat vel eu, ludus regione vivendum mea eu.</p>
        <a href="#" class="button small radius">Button 3</a>
      </div>
    </div>
    </div>
.mybox {
  background-color: lightblue;
}

p {
   padding-bottom: 2.5em;
}

.button {
  position: absolute;
  bottom: 0;
}

hector_sapien commented on hector_sapien's post almost 5 years

My (simple) code
HTML
<div class="row">
<div class="small-12 medium-4 columns">
<p>Lorem ipsum dolor sit amet, quis ocurreret expetendis at eos, pro et alii soluta ornatus. Inermis adipiscing vis cu, ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. </p>
<a href="#" class="button small radius">Button 1</a>
</div>
<div class="small-12 medium-4 columns">
<p>Lorem ipsum dolor sit amet, quis ocurreret expetendis at eos, pro et alii soluta ornatus. Inermis adipiscing vis cu, ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. Eos antiopam iudicabit vituperata te, unum harum feugiat vel eu, ludus regione vivendum mea eu.</p>
<a href="#" class="button small radius">Button 2</a>
</div>
<div class="small-12 medium-4 columns">Ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. Eos antiopam iudicabit vituperata te, unum harum feugiat vel eu, ludus regione vivendum mea eu.</p>
<a href="#" class="button small radius">Button 3</a>
</div>
</div>

hector_sapien commented on Hannes Lehner's post over 5 years

Is there a solution for this?
I've even tried putting the css is the header and it's still overridden.

thx!

Posts Followed




Following

    No Content

Followers

My Posts

My Comments

You commented on hector_sapien's post over 3 years

I just noticed this isn't 100% working because I do have some horizontal scrolling.

You commented on hector_sapien's post over 3 years

Nice and creative solution!
Thanks!

You commented on Travis Fulton's post over 3 years

Confirmed, I've got this working too! :)

You commented on hector_sapien's post over 3 years

Ok, i've found the issue. Al dynamically added styles are removed in the build for production process by UnCSS.
If I remove the UnCSS process from the gulpfile, all issues are gone.

You commented on hector_sapien's post over 3 years

Thanks Rafi, good article!

You commented on hector_sapien's post over 3 years

Thanks. I'm running the latest version (6.1.1)
Anybody have any ideas why my build fail, or have the same issues?

You commented on Travis Fulton's post over 3 years

I'm having the same issue. I can do 1 or maybe 2 saves in a partial, the I need to restart the 'watch' process.

You commented on hector_sapien's post almost 5 years

Thx Rafi,

For some reason, adding relative positioning to the containing div didn't work.
And since the buttons got absolute positioning they were taken out of the flow and started overlapping the above paragraph.

I solved this by adding some bottom padding to the element above the buttons.

 <div class="row" data-equalizer>
      <div class="small-12 medium-4 columns panel" data-equalizer-watch>
      <div class="mybox">
        <p>Lorem ipsum dolor sit amet, quis ocurreret expetendis at eos, pro et alii soluta ornatus. Inermis adipiscing vis cu, ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. </p>
        <a href="#" class="button small radius">Button 1</a>
      </div>
      </div>
      <div class="small-12 medium-4 columns panel" data-equalizer-watch>
      <div class="mybox">
        <p>Lorem ipsum dolor sit amet, quis ocurreret expetendis at eos, pro et alii soluta ornatus. Inermis adipiscing vis cu, ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. Eos antiopam iudicabit vituperata te, unum harum feugiat vel eu, ludus regione vivendum mea eu.</p>
        <a href="#" class="button small radius">Button 2</a>
      </div>
      </div>
      <div class="small-12 medium-4 columns panel" data-equalizer-watch>
      <div class="mybox">
      <p>Ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. Eos antiopam iudicabit vituperata te, unum harum feugiat vel eu, ludus regione vivendum mea eu.</p>
        <a href="#" class="button small radius">Button 3</a>
      </div>
    </div>
    </div>
.mybox {
  background-color: lightblue;
}

p {
   padding-bottom: 2.5em;
}

.button {
  position: absolute;
  bottom: 0;
}

You commented on hector_sapien's post almost 5 years

My (simple) code
HTML
<div class="row">
<div class="small-12 medium-4 columns">
<p>Lorem ipsum dolor sit amet, quis ocurreret expetendis at eos, pro et alii soluta ornatus. Inermis adipiscing vis cu, ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. </p>
<a href="#" class="button small radius">Button 1</a>
</div>
<div class="small-12 medium-4 columns">
<p>Lorem ipsum dolor sit amet, quis ocurreret expetendis at eos, pro et alii soluta ornatus. Inermis adipiscing vis cu, ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. Eos antiopam iudicabit vituperata te, unum harum feugiat vel eu, ludus regione vivendum mea eu.</p>
<a href="#" class="button small radius">Button 2</a>
</div>
<div class="small-12 medium-4 columns">Ad cum dicta integre appetere. No vide impetus vim, vis adhuc voluptua no, meis prima ex eam. Eos antiopam iudicabit vituperata te, unum harum feugiat vel eu, ludus regione vivendum mea eu.</p>
<a href="#" class="button small radius">Button 3</a>
</div>
</div>

You commented on Hannes Lehner's post over 5 years

Is there a solution for this?
I've even tried putting the css is the header and it's still overridden.

thx!

Posts Followed

Following

  • No Content

Followers

  • No Content