html - Is it allowed/recommended to use height in responsive websites? -


i saw somewhere wasn't recommended use height , use padding instead, why that? height , padding produces same results - @ least in trials -... there reason me using padding instead of height?

to answer question - of course can use height in responsive websites without problem.

i think may have read using padding in place of height keeping aspect ratio of element same since percentage based padding relative width of element , percentage based height relative it's container.

a common use case embedding youtube video in responsive wesbite.

html

<div class="video-container">    <iframe src="//www.youtube.com/embed/k_d5jwvbiru?wmode=opaque&amp;rel=0&amp;showinfo=0&amp;modestbranding=1&amp;controls=2&amp;autohide=1" frameborder="0" allowfullscreen=""></iframe> </div> 

css

.video-container {   position: relative;   width: 100%;   height: 0;   padding-bottom: 56.25%;   background: #000; } .video-container iframe {   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 0;   width: 100%;   height: 100%; } 

fiddle here: http://jsfiddle.net/84wm08k7/

as can see height of video-container set 0 , padding-bottom set 56.25%. restricts element being 16:9 aspect ratio video , responsive.


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -