Question

我是Bootstrap的新手，我在让两个兄弟列在父DIV下渲染到相同高度时遇到问题。基本上，我试图创造一个＆＃34;黑板＆＃34;我想在视频播放器上呈现100％但在页面加载时呈现黑色背景的视频旁边。

以下是代码：

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Responsive Custom Video Player</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
    .jumbotron {
        padding: 0;
        margin-bottom: 0;
    }
    .blackboard {
        background-color: #000;
        color: #fff;
        min-height: 100%;
        margin: 0 auto;
        text-align: left;
    }
</style>
<div class="row jumbotron">
    <div class="player col-sm-6">
        <video width="100%" poster="videos/poster.jpg" id="videoPlayer">
            <source src="videos/BigBuckBunny_512kb.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>

    <div class="blackboard col-sm-6">
        BLACKBOARD
    </div>
</div>
</body>
</html>

＆＃34;黑板＆＃34; DIV仅渲染DIV内文本的高度。 jumbotron的默认背景颜色#eee填充了DIV的其余部分。

Answer 1

这样可行，但似乎有点hacky。将ID选择器添加到这两个DIV中：

// Force blackboard to the same height as the player.
$(window).resize(function() {
    $("#blackboard").height($("#player").height());
})

$(window).resize(); // On page load

在父Bootstrap jumbotron中强制使用相等高度的子DIV

1 个答案: