[RUBY] Difference between vh and%

I want to get rid of the blank space at the bottom of the credit card registration screen. It's hard to see in the photo, but the blank space in the yellow area I struggled to get rid of it.

スクリーンショット 2020-09-23 10.21.22.png

Check various things, html and body

height: 100%;

When I tried the method of guessing, the view of other pages was also affected. Abandon this method. .. ..

I struggled for about two hours after this, in the card_add class

height: 100vh;

This is a quick solution.

I didn't understand the difference between% and vh when specifying the height of the element. It seems that it took some time to get here.

Difference between vh and%

【vh】 Depends on the display area of the page.

height: 100vh;

If you specify, the height will be displayed in the full display area of the page.

【％】 Depends on the parent element.

height: 100%;

If you specify, the size of the parent element is also displayed.

Recommended Posts

Difference between vh and%
Difference between i ++ and ++ i
Difference between product and variant
Difference between redirect_to and render
[Java] Difference between == and equals
Rails: Difference between resources and resources
Difference between puts and print
Difference between redirect_to and render
Difference between CUI and GUI
Difference between variables and instance variables
Difference between class and instance
Difference between bundle and bundle install
Difference between ArrayList and LinkedList
Difference between render and redirect_to
Difference between List and ArrayList
Difference between .bashrc and .bash_profile
Difference between StringBuilder and StringBuffer
Difference between render and redirect_to
Difference between render and redirect_to
[Ruby] Difference between get and post
Difference between render method and redirect_to
Difference between interface and abstract class
Difference between == operator and equals method
[Java] Difference between Hashmap and HashTable
[Terminal] Difference between irb and pry
JavaServlet: Difference between executeQuery and executeUpdate
[Ruby] Difference between is_a? And instance_of?
[Rails] Difference between find and find_by
[JAVA] Difference between abstract and interface
Difference between Thymeleaf @RestController and @Controller
Difference between Stream map and flatMap
[Java] Difference between array and ArrayList
Difference between string.getByte () and Hex.decodeHex (string.toCharaArray ())
[Java] Difference between Closeable and AutoCloseable
[Java] Difference between StringBuffer and StringBuilder
[Java] Difference between length, length () and size ()
[rails] Difference between redirect_to and render
[Android] Difference between finish (); and return;
Note: Difference between Ruby "p" and "puts"
Difference between final and Immutable in Java
[Memo] Difference between bundle install and update
Difference between Ruby instance variable and local variable
Difference between pop () and peek () in stack
[For beginners] Difference between Java and Kotlin
Difference between isEmpty and isBlank of StringUtils
Difference between getText () and getAttribute () in Selenium
About the difference between irb and pry
Difference between EMPTY_ELEMENTDATA and DEFAULTCAPACITY_EMPTY_ELEMENTDATA in ArrayList
Difference between addPanel and presentModally of FloatingPanel
[Ruby] Difference between print, puts and p
[Java] Difference between Intstream range and rangeClosed
Difference between int and Integer in Java
[Rails] Difference between redirect_to and render [Beginner]
[iOS] Understand the difference between frame and bounds
[Rails / ActiveRecord] About the difference between create and create!
Difference between next () and nextLine () in Java Scanner
Understand the difference between abstract classes and interfaces!
What is the difference between SimpleDateFormat and DateTimeFormatter? ??
Switch between JDK 7 and JDK 8
Difference between member and collection of rails routes.rb
[Rails] Difference between create method and new + save method