Bootstrap div won't adapt to height based on content - html

Question

Note: Yes I did make a research first trying to find a solution and tried to implement a number of options to fix the problem, nothing I could find worked though!
UPDATE
Because media queries are not an optimal solution for my problem, as I have to take into account multiple cases of width/height combinations in a responsive layout, I used some javascript at the end in order to calculate the difference in height of the banner div and the content div in order to readjust height accordingly. Here is the code I used
function resizeContainers()
{
var bannerContainer = $('#banner');
var contentContainer = $('#homeFormContainer');
var bannerContainerHeight = bannerContainer.height();
var bannerContainerBottom = $(window).height() - bannerContainerHeight;
var contentContainerBottom = $(window).height() - contentContainer.height();
var containersDiff = bannerContainerBottom - contentContainerBottom;
if (containersDiff > -200) {
var newBannerContainerHeight = bannerContainerHeight+contentContainerBottom+20;
bannerContainer.css('height', newBannerContainerHeight);
}
}
$(document).ready(function () {
// check and resize after page loads
resizeContainers();
// check and resize containers on window resize
$(window).resize(function() {
resizeContainers();
});
});
I am struggling with a div in bootstrap that won't adapt to the height of it's inner content. As far as I can tell, CSS looks OK (but it probably is not, so I could use some help).
You can see the fiddle here
http://jsfiddle.net/spairus/fbmssraw/6/
The basic HTML structure looks like this
<div id="banner" class="banner">
<div class="banner-image"></div>
<div class="banner-caption" style="display: table;">
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
(content here)
</div>
</div>
</div>
</div>
</div>
And the CSS
html,
body {
height: 100%;
}
img {
display: block;
max-width: 100%;
height: auto;
}
.banner {
width: 100%;
height:100%;
min-height: 100%;
position: relative;
color: #fff;
}
.banner-image {
vertical-align: middle;
min-height: 100%;
width: 100%;
}
.banner:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.55);
content: "";
}
.banner-caption {
position: absolute;
top: 22%;
width: 100%;
z-index: 2;
}
.subfooter {
background-color: #fafafa;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 40px 0;
}
/* Backgrounds
----------------------------------------------------------------------------- */
.default-bg {
background-color: #222222;
color: #ffffff;
}
.space {
padding: 20px 0;
}
I need the .banner and .banner-caption to expand along with the content.

Answer 1

If you're going to have the following code:
html,
body {
height: 100%;
}
and then on your main container:
.banner {
width: 100%;
height:100%;
min-height: 100%;
position: relative;
color: #fff;
}
the container is not going to be responsive to the content inside it, because what you've said in the CSS is basically "hey container (banner), I want you to be 100% of the screen size of whatever device you show up on" .
Instead you need to change the css to said "hey container I want you to have a min-width or be responsive to whatever content you have inside you", so you could do the following:
The best solution I have for this problem (which I face quite often) is as follows.
#media only screen and (min-width : 992px) {
.banner {
width: 100%;
height:120%; // adjust this to whatever size you think your content will stretch to there is no golden rule saying it has to be 100% only.
min-height: 100%;
position: relative;
color: #fff;
}
}
Edit
Why does the above solution work? Notice how I have added a media query that says min width of 992px, now it's safe to say that the dimension of devices above 992px are predictable, and thus it's safe to use a height:120%; it's only when you go below 992px or 768px that the screen resolution (height & width) become unpredictable to counter this you add absolutely no styling to the height of the container.
How effective is this technique? Well, it is pretty effective, but on some screens (the screens above 992px) there might arise a problem of excessive white spacing or slight overlapping of content.
Now to counter this problem you can use multiple media queries : eg.
#media only screen and (min-width : 768px) {
height : 125 %;
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
height : 120 %
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
height : 100 %
}
but IMHO, this is not needed unless you need pin point accuracy (multiple media queries are a pain!). Worst case scenario, use two media queries.
Anyway, here's the technique in action. Try to reduce the screen size and voila! Still looks pretty, and nowhere have a added height:400% for smaller screens: it adapts by itself.