html - footer height is too small in Chrome -
i'm looking here @ element footer.mdl-mini-footer. given sizes measured using f12 developer tools in responsive mode screen size of 768x884 (chrome's tablet breakpoint size).
in firefox, element footer.mdl-mini-footer has size of width: 736px; height: 36px;.
in chrome, element footer.mdl-mini-footer has size of width: 736px; height: 10.438px;.
the key point here height difference. in both browsers, child element ul.mdl-mini-footer__link-list has size of width: 268px; height: 36px;, causing footer's content sink beneath footer element.
note style="padding: 8px 16px" on footer element is not required issue occur, makes more visible cutting down on default padding provided material design lite of 32px 16px. specifically, issue the footer's height decreases in chrome page's content has scroll more. does not happen in firefox, , desired behavior.
for completeness sake, tested page in microsoft edge, behaves firefox. also, changing chrome's zoom level 125% better match firefox's zoom level exacerbates problem new footer height of 8.297px.
why happen in chrome, , how can prevent it?
stack snippet in firefox: 
stack snippet in chrome: 
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- material design lite --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.deep_purple-blue.min.css"> <script defer="" src="https://code.getmdl.io/1.1.3/material.min.js"></script> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=roboto:300,400,500,700" type="text/css"> </head> <body> <div class="mdl-layout__container"> <div class="mdl-layout mdl-js-layout"> <main class="mdl-layout__content"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nullam egestas, magna ac ultrices hendrerit, risus lorem accumsan justo, @ finibus orci odio @ sapien. morbi eu placerat nisl. nunc rhoncus ut risus nec eleifend. nulla facilisi. morbi nec nisi facilisis, maximus ligula sed, facilisis enim. suspendisse fermentum venenatis tincidunt. maecenas semper consectetur vestibulum. morbi eget molestie magna. duis quis neque interdum, elementum risus ac, interdum urna. nunc fermentum non nulla vel pharetra. in ullamcorper ac ipsum ut convallis. morbi bibendum nisi vitae quam commodo porta.</p> <p>nam facilisis finibus libero vel consequat. cras eu magna in dui ullamcorper aliquet nec vestibulum mi. nam rutrum justo ac risus imperdiet consectetur. donec pellentesque sapien nec euismod ullamcorper. nam efficitur quam vitae justo convallis, aliquet justo finibus. pellentesque auctor finibus neque sed dapibus. ut maximus interdum risus ut viverra. quisque varius, augue et cursus efficitur, nisl arcu maximus sapien, vel tempor erat elit @ turpis. nullam imperdiet urna eget elit dignissim, ut feugiat nibh lacinia. aliquam vel cursus est. praesent tristique mauris ex viverra, @ vehicula nibh laoreet.</p> <p>curabitur lacinia, justo ac placerat porta, lectus nulla aliquam nisi, sit amet elementum enim ipsum vitae tortor. donec eu ultrices tellus. nam et quam nisl. nulla facilisi. donec turpis velit, tristique et ultrices sit amet, blandit vel tellus. nam ultricies posuere odio in pretium. integer semper, lacus @ pulvinar condimentum, nibh nibh ornare dui, vel tincidunt mauris turpis @ sapien. nunc ultrices sollicitudin diam ut semper. nulla quis quam fringilla, pretium erat eu, hendrerit tellus. ut lacinia elit eu leo lobortis tincidunt. sed vel gravida purus. fusce ultrices libero ante, sit amet finibus sem eleifend ac. etiam ullamcorper placerat orci, id vulputate sapien blandit eget. proin eget hendrerit tellus, sit amet venenatis dui.</p> <p>nullam ut diam et ante euismod suscipit. sed aliquet rutrum pharetra. sed quis orci malesuada, elementum tellus id, aliquet eros. donec ut nisl sit amet erat ornare finibus. aliquam id tincidunt augue. sed tincidunt maximus sem @ dictum. fusce in quam efficitur, finibus sapien a, convallis felis. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. in hac habitasse platea dictumst. phasellus tristique auctor diam, euismod cursus mi. phasellus quis posuere mi. integer ut rhoncus massa. curabitur quis consequat sapien, sit amet malesuada mauris. vestibulum in tristique ex, ut fermentum velit. nam ac lobortis dui, eget aliquam ligula. vestibulum vel leo in purus tincidunt luctus non ut orci.</p> <p>integer venenatis vestibulum lorem nec ultrices. in eget commodo velit, in vulputate nisi. aliquam pulvinar dignissim nisl. pellentesque congue faucibus enim, malesuada quam molestie nec. sed lacinia turpis tellus, eu pretium lectus auctor id. sed porta ipsum eu neque volutpat volutpat. suspendisse rutrum mi felis, nec vulputate velit vulputate quis. maecenas mollis lobortis neque, nec vehicula orci. vivamus fringilla volutpat ligula. proin eu sem eget orci convallis lobortis. proin id orci luctus, elementum velit eget, pulvinar orci.</p> <p>etiam hendrerit ipsum eros, semper mi fringilla et. fusce pretium ac lorem in blandit. nulla facilisi. nunc orci lectus, cursus eget semper vitae, interdum non turpis. suspendisse dolor ante, tincidunt eu urna eu, dapibus consectetur dolor. in in tortor et lorem euismod semper. nullam gravida turpis vel commodo ullamcorper. vestibulum rutrum consequat tortor @ blandit. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. nunc eget eleifend lectus. duis mollis aliquet ipsum eget tempus.</p> <p>aliquam viverra neque vitae faucibus posuere. phasellus facilisis nisl vel risus aliquam commodo. etiam lacinia laoreet sagittis. mauris dignissim odio sed diam tempor, dapibus condimentum massa cursus. integer ut nibh commodo, congue tortor vel, imperdiet ex. morbi quis elementum metus, nec consequat purus. praesent rutrum efficitur tempus. phasellus hendrerit luctus magna in vehicula. vestibulum dictum magna nisi, @ lacinia lorem vestibulum et.</p> <p>aliquam erat volutpat. phasellus @ eleifend ligula. nam sed placerat nisl, pulvinar ante. mauris ac laoreet ante. aliquam pellentesque leo tortor, sed tempor massa egestas quis. fusce dictum non turpis sed scelerisque. nunc tristique nisl ac ante tristique venenatis. quisque quis felis rhoncus, porttitor enim sit amet, facilisis quam. curabitur non erat ac ante faucibus lobortis eget @ lorem. maecenas eget tempus sapien. curabitur eu luctus nulla, eu luctus ex. vestibulum sodales enim enim, sit amet tempor ligula laoreet at. etiam est arcu, elementum et sodales non, tincidunt et sapien. fusce vitae molestie mi, bibendum felis. sed nunc mauris, faucibus vel rutrum ut, lacinia sit amet neque.</p> <p>curabitur blandit lacus ut erat cursus luctus quis blandit ex. duis eget fringilla risus, et egestas ligula. pellentesque ligula ante, vulputate in faucibus et, efficitur sed mauris. aliquam @ pretium est, nec tempor mauris. ut pharetra eget neque non dapibus. suspendisse potenti. nulla blandit tellus vel massa elementum, vel consectetur ligula maximus. vestibulum rutrum magna sit amet dictum mattis. morbi varius lacus ac imperdiet fringilla. suspendisse molestie nibh vitae gravida sollicitudin. suspendisse tempor finibus felis, eu sagittis lorem.</p> <p>sed sodales ultrices facilisis. phasellus vel massa id neque convallis volutpat vitae sed turpis. sed ac massa dolor. sed facilisis nulla suscipit commodo venenatis. in bibendum consectetur rutrum. duis dapibus, risus sit amet semper pharetra, erat dui blandit erat, sit amet rutrum ante est nec enim. pellentesque lobortis ligula sed fringilla dictum. proin rhoncus, lacus in facilisis pharetra, lorem leo facilisis metus, ac ornare diam risus sed ipsum. nullam mattis enim nec odio porttitor fermentum vel vel mi. aliquam lacinia consectetur interdum.</p> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nullam egestas, magna ac ultrices hendrerit, risus lorem accumsan justo, @ finibus orci odio @ sapien. morbi eu placerat nisl. nunc rhoncus ut risus nec eleifend. nulla facilisi. morbi nec nisi facilisis, maximus ligula sed, facilisis enim. suspendisse fermentum venenatis tincidunt. maecenas semper consectetur vestibulum. morbi eget molestie magna. duis quis neque interdum, elementum risus ac, interdum urna. nunc fermentum non nulla vel pharetra. in ullamcorper ac ipsum ut convallis. morbi bibendum nisi vitae quam commodo porta.</p> <p>nam facilisis finibus libero vel consequat. cras eu magna in dui ullamcorper aliquet nec vestibulum mi. nam rutrum justo ac risus imperdiet consectetur. donec pellentesque sapien nec euismod ullamcorper. nam efficitur quam vitae justo convallis, aliquet justo finibus. pellentesque auctor finibus neque sed dapibus. ut maximus interdum risus ut viverra. quisque varius, augue et cursus efficitur, nisl arcu maximus sapien, vel tempor erat elit @ turpis. nullam imperdiet urna eget elit dignissim, ut feugiat nibh lacinia. aliquam vel cursus est. praesent tristique mauris ex viverra, @ vehicula nibh laoreet.</p> <p>curabitur lacinia, justo ac placerat porta, lectus nulla aliquam nisi, sit amet elementum enim ipsum vitae tortor. donec eu ultrices tellus. nam et quam nisl. nulla facilisi. donec turpis velit, tristique et ultrices sit amet, blandit vel tellus. nam ultricies posuere odio in pretium. integer semper, lacus @ pulvinar condimentum, nibh nibh ornare dui, vel tincidunt mauris turpis @ sapien. nunc ultrices sollicitudin diam ut semper. nulla quis quam fringilla, pretium erat eu, hendrerit tellus. ut lacinia elit eu leo lobortis tincidunt. sed vel gravida purus. fusce ultrices libero ante, sit amet finibus sem eleifend ac. etiam ullamcorper placerat orci, id vulputate sapien blandit eget. proin eget hendrerit tellus, sit amet venenatis dui.</p> <p>nullam ut diam et ante euismod suscipit. sed aliquet rutrum pharetra. sed quis orci malesuada, elementum tellus id, aliquet eros. donec ut nisl sit amet erat ornare finibus. aliquam id tincidunt augue. sed tincidunt maximus sem @ dictum. fusce in quam efficitur, finibus sapien a, convallis felis. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. in hac habitasse platea dictumst. phasellus tristique auctor diam, euismod cursus mi. phasellus quis posuere mi. integer ut rhoncus massa. curabitur quis consequat sapien, sit amet malesuada mauris. vestibulum in tristique ex, ut fermentum velit. nam ac lobortis dui, eget aliquam ligula. vestibulum vel leo in purus tincidunt luctus non ut orci.</p> <p>integer venenatis vestibulum lorem nec ultrices. in eget commodo velit, in vulputate nisi. aliquam pulvinar dignissim nisl. pellentesque congue faucibus enim, malesuada quam molestie nec. sed lacinia turpis tellus, eu pretium lectus auctor id. sed porta ipsum eu neque volutpat volutpat. suspendisse rutrum mi felis, nec vulputate velit vulputate quis. maecenas mollis lobortis neque, nec vehicula orci. vivamus fringilla volutpat ligula. proin eu sem eget orci convallis lobortis. proin id orci luctus, elementum velit eget, pulvinar orci.</p> <p>etiam hendrerit ipsum eros, semper mi fringilla et. fusce pretium ac lorem in blandit. nulla facilisi. nunc orci lectus, cursus eget semper vitae, interdum non turpis. suspendisse dolor ante, tincidunt eu urna eu, dapibus consectetur dolor. in in tortor et lorem euismod semper. nullam gravida turpis vel commodo ullamcorper. vestibulum rutrum consequat tortor @ blandit. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. nunc eget eleifend lectus. duis mollis aliquet ipsum eget tempus.</p> <p>aliquam viverra neque vitae faucibus posuere. phasellus facilisis nisl vel risus aliquam commodo. etiam lacinia laoreet sagittis. mauris dignissim odio sed diam tempor, dapibus condimentum massa cursus. integer ut nibh commodo, congue tortor vel, imperdiet ex. morbi quis elementum metus, nec consequat purus. praesent rutrum efficitur tempus. phasellus hendrerit luctus magna in vehicula. vestibulum dictum magna nisi, @ lacinia lorem vestibulum et.</p> <p>aliquam erat volutpat. phasellus @ eleifend ligula. nam sed placerat nisl, pulvinar ante. mauris ac laoreet ante. aliquam pellentesque leo tortor, sed tempor massa egestas quis. fusce dictum non turpis sed scelerisque. nunc tristique nisl ac ante tristique venenatis. quisque quis felis rhoncus, porttitor enim sit amet, facilisis quam. curabitur non erat ac ante faucibus lobortis eget @ lorem. maecenas eget tempus sapien. curabitur eu luctus nulla, eu luctus ex. vestibulum sodales enim enim, sit amet tempor ligula laoreet at. etiam est arcu, elementum et sodales non, tincidunt et sapien. fusce vitae molestie mi, bibendum felis. sed nunc mauris, faucibus vel rutrum ut, lacinia sit amet neque.</p> <p>curabitur blandit lacus ut erat cursus luctus quis blandit ex. duis eget fringilla risus, et egestas ligula. pellentesque ligula ante, vulputate in faucibus et, efficitur sed mauris. aliquam @ pretium est, nec tempor mauris. ut pharetra eget neque non dapibus. suspendisse potenti. nulla blandit tellus vel massa elementum, vel consectetur ligula maximus. vestibulum rutrum magna sit amet dictum mattis. morbi varius lacus ac imperdiet fringilla. suspendisse molestie nibh vitae gravida sollicitudin. suspendisse tempor finibus felis, eu sagittis lorem.</p> <p>sed sodales ultrices facilisis. phasellus vel massa id neque convallis volutpat vitae sed turpis. sed ac massa dolor. sed facilisis nulla suscipit commodo venenatis. in bibendum consectetur rutrum. duis dapibus, risus sit amet semper pharetra, erat dui blandit erat, sit amet rutrum ante est nec enim. pellentesque lobortis ligula sed fringilla dictum. proin rhoncus, lacus in facilisis pharetra, lorem leo facilisis metus, ac ornare diam risus sed ipsum. nullam mattis enim nec odio porttitor fermentum vel vel mi. aliquam lacinia consectetur interdum.</p> </main> <footer style="padding: 8px 16px" class="mdl-mini-footer"> <div class="mdl-mini-footer__right-section"> <ul class="mdl-mini-footer__link-list"> <li> <img alt="github" height="32" src="https://raw.githubusercontent.com/cad97/so-resources/9ca92a11babb0766580e511d8473b960c040cc91/01/github-32x32.png"> </li> <li> <img alt="youtube" height="32" src="https://raw.githubusercontent.com/cad97/so-resources/9ca92a11babb0766580e511d8473b960c040cc91/01/youtube-45x32.png"> </li> <li> <img alt="twitter" height="32" src="https://raw.githubusercontent.com/cad97/so-resources/9ca92a11babb0766580e511d8473b960c040cc91/01/twitter-39x32.png"> </li> </ul> </div> </footer> </div> </div> </body> </html>
put footer within <main> element here. page content goes within mdl-layout__content element. otherwise layout javascript going mess , things won't work expected (as seeing.)
Comments
Post a Comment