Bootstrap div 不会根据内容自适应高度

Question

注意：是的，我确实首先进行了研究，试图找到解决方案，并尝试实施多个选项来解决问题，但我找不到任何有效的方法！

更新

因为媒体查询不是我的问题的最佳解决方案，因为我必须考虑响应式布局中 width/height 组合的多种情况，所以我在最后使用了一些 javascript为了计算横幅 div 和内容 div 的高度差异，以便相应地重新调整高度。这是我使用的代码

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();
    });
});

我正在努力解决 bootstrap 中的 div 无法适应其内部内容高度的问题。据我所知，CSS 看起来不错（但可能不是，所以我需要一些帮助）。

你可以在这里看到fiddle http://jsfiddle.net/spairus/fbmssraw/6/

基本的 HTML 结构如下所示

    <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>

还有 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;
}

我需要 .banner 和 .banner-caption 随内容展开。

Answer 1

如果您要使用以下代码：

html,
body {
    height: 100%;
}

然后在你的主容器上：

.banner {
    width: 100%;
    height:100%;
    min-height: 100%;
    position: relative;
    color: #fff;
}

容器不会响应其中的内容，因为你在CSS中所说的基本上是"hey container (banner), I want you to be 100% of the screen size of whatever device you show up on"。

相反，您需要将 css 更改为 "hey container I want you to have a min-width or be responsive to whatever content you have inside you"，这样您就可以执行以下操作：

我对这个问题（我经常遇到）的最佳解决方案如下。

@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;
        }
    }

编辑

为什么上述解决方案有效？请注意我是如何添加一个媒体查询的，它表示最小宽度为 992px，现在可以安全地说 992px 以上的设备尺寸为 predictable，因此可以安全地使用 height:120%;只有当您低于 992px 或 768px 时，屏幕分辨率（高度和宽度）才变得不可预测，为了应对这种情况，您绝对不会为容器的高度添加任何样式。

这项技术的效果如何？嗯，效果还不错，但是在某些屏幕上（992px上面的屏幕）可能会出现白间距过大或者内容轻微重叠的问题

现在要解决这个问题，您可以使用多个媒体查询：例如。

 @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 %
    }

但是恕我直言，除非您需要精确定位（多媒体查询很痛苦！），否则不需要这样做。最坏的情况，使用两个媒体查询。

无论如何，这是 action 中的技巧。尝试减小屏幕尺寸，瞧！看起来仍然很漂亮，并且没有为较小的屏幕添加 height:400%：它会自行适应。

Bootstrap div 不会根据内容自适应高度

Bootstrap div won't adapt to height based on content

html

css

twitter-bootstrap

twitter-bootstrap-3

编辑