Question

注意：是的我先做了一项研究，试图找到一个解决方案并尝试实施一些选项来解决问题，但我找不到任何工作！

更新

因为媒体查询不是我的问题的最佳解决方案，因为我必须在响应式布局中考虑多个宽度/高度组合的情况，我在末尾使用了一些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();
    });
});

我正在努力解决一个无法适应内部内容高度的div。据我所知，CSS看起来还不错（但可能不是，所以我可以使用一些帮助）。

你可以在这里看到小提琴 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

如果您要使用以下代码，请使用mspir：

html,
body {
    height: 100%;
}

然后在你的主容器上......

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

容器不会响应其中的内容，因为你在CSS中所说的基本上是“嘿容器（横幅）..我希望你100％您显示的任何设备的屏幕尺寸“。

相反，您需要将css更改为“嘿容器，我希望您拥有最小宽度或响应您内部的任何内容”，因此您可以执行以下操作：

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

@media only screen and (min-width : 992px) {
     .banner {
    width: 100%;
    height:120%;  // adjust this to whatever size you think your content will streach too there is no golden rule saying it gotta be 100% only.
    min-height: 100%;
    position: relative;
    color: #fff;
        }
    }

编辑::

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

这种技术如何有效::

TBH PRETTY EFFECTIVE ，但在某些屏幕（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 %
    }

但恕我直言，除非你需要精确定位（多媒体查询很痛苦!!），否则不需要这样做。最糟糕的情况，使用2个媒体查询。

无论如何，继承action中的技巧。试着减小屏幕尺寸，Viola !!仍然看起来很漂亮...并且没有为较小的屏幕添加height:400% ...它自己适应。

希望这会有所帮助。

亚历-Z。

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

1 个答案: