Menu
Generally, what markup and CSS will create an element with a percentage-based height in a responsive design? How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap? shows how to create two 100% height columns, but this breaks for heights < 100%.
Specifically, I have a sidebar div with a list of items, which may be short (empty) or long (overflow: auto). But because no parent elements have a fixed height, height: 20%; does not work. How can I give the sidebar a fluid height while maintaining a responsive design?
260
For the height of a div to be responsive, it must be inside a parent element with a defined height to derive it's relative height from. If you set the height of the container holding the image and text box on the right, you can subsequently set the heights of its two children to be something like 75% and 25%.
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.
Usually having a fluid padding-bottom on the parent container solves this problem.
More information can be found here : http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
update: on js bin http://jsbin.com/obesuk/1/
markup :
<div class="obj-wrapper"> <div class="content">content</div> </div> css:
.obj-wrapper { position:relative; width:50%; padding-bottom:40%; height:0; overflow:hidden; } .content { position:absolute; width:100%; height:100%; background:red; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
