Bottom Margin in iPhone X using storyboard

Question

Ok I have this case,

There is this screen I designed for iphone 8

As you can see here there is 8px green view that I pinned to the bottom of the superview by making a constrain of 0px between this view and top of bottom layout guide. and it works fine on all phone EXCEPT for the new iPhone X where this happens:

and thats not my intended behaviour. I want to to be as the other iPhones, pinned to the bottom with 0 margin.

Is there is a solution for that using the storyboard? Please post solutions using storyboard only. I know that I can do it programmatically. this should be easy on storyboard I guess.

Thank you

Answer 1

1- Select your view in storyboard



2- Double click on bottom space constraint and select Superview for first item

3- Set constant value to 0

Answer 2

You can achieve this

By Setting AutoResizing like this in storyboard

With AutoLayouts

Answer 3

In storyboard select "View as: iPhone X" and pin the desired view to superview, not Bottom Layout Guide or Safe Area (in my example it's a full screen image view, your view would be pinned only to bottom):

Alternatively, if you are not in iPhone X view, you can pin bottom edge to superview by dragging with ctrl key and then when selecting from the list, press option key - more details in this answer: Autolayout: Add constraint to superview and not Top Layout Guide?