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&rel=0&showinfo=0&modestbranding=1&controls=2&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.