▼
Streaming live at 10am (PST)

Need column to stretch full column row height

Design help General
#1

Hello!

I’m having a bit of an issue; I’m currently working on a Webflow project and I’m creating small column boxes. The right-side of the column is filled with a block colour, which I would like to stretch from top-to-bottom of the column without using padding/margins. I can get it to fill the column left to right (horizontally) but setting Width to 100%. But setting the height to 100% does not work.

When the content in the left column is higher/taller than the right, there is a white space at the bottom.

Image of issue below: http://imgur.com/NUqvDJm

#2

Can you share a public read only link please to give better step by step instructions

#3

I’m happy to share in Private but not publicly (unfortunately the client has requested that I don’t do this). If anyone wants to take a look, please let me know and I’ll PM it over.

#4

This is something in the works for future css versions, still not standard.
[flexbox][1]
Depending on the project this might be a solution.

Maybe some other can help with a JavaScript soloution.
Here’s one I found: [javascript flexbox fallback][2]

I know there been discussions about this on the forum, maybe you can find more interesting things here.

Hope this helps :smile:
[1]: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
[2]: http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

#5

Here´s another simple solution: Full height sidebar
Public link

This works if you are able to have a fixed height on the parent container. If so, set it to relative and set the sidebar to 100%.

Edit: the child does not to be relative. Changed the original text.

I’ll try to put in an example with flexbox css as well.

Edit 2: Updated with flexbox css. Not sure if thats really enough but it worked in chrome anyway. The row have class and in the custom code area i added display: flex;
So in my case:

.flexbox-row:{
  display: flex;
}

Have a look at my links :smile:

Edit 3:

.flexbox-row {
  display: flex;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
}
#6

Sorry, got busy, no worries on not being able to share the link ~ @jorn probably has the best solution anyways if you don’t want to use fixed heights on both columns or padding.

#7