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

时间:2015-04-11 09:53:01

标签: html css twitter-bootstrap twitter-bootstrap-3

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

更新

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

1 个答案:

答案 0 :(得分:2)

如果您要使用以下代码,请使用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}},只有当你低于992px768px,屏幕分辨率(高度和宽度)变得不可预测才能对抗这个时,你绝对不会在容器的高度上添加任何样式。

这种技术如何有效::

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。