javascript - 滚动 <div> 旁边的静态 <div>

Question

我正在使用 bootstrap，我有一个 div，里面还有 2 个并排的。自然地，我采用行的方法来获得所需的结果，但我遇到了一个问题。我正在设计的 div 是用于 ozone 上的一个小型 web 小部件(现在这不重要)但是当我有窗口的大小时，它将把第二个 div 推到下面。

将它们堆叠在一起(没有 row 实现)的代码是:

<div style="margin: 1em">
    <h4>User Card</h4>
    <i class="fa fa-user fa-5x"></i>
    <h6>User: {{username.slice(5)}}</h6>
    <h6>Total Score: {{totalscore.toFixed(3)}}%</h6>
    <table class="table table-hover table-striped">
        <thead>
            <th>#</th>
            <th>Model</th>
            <th>Score</th>
        </thead>
        <tr data-ng-repeat=" item in infractions | orderBy : '-score' | limitTo : 10 " ng-click="launch()" ng-style="setColor(item.score)">
            <td>{{$index + 1}} </td>
            <td>{{item.name.replace("_"," ")}}</td>
            <td>{{item.score.toFixed(3)}}</td>
        </tr>
    </table>
</div>

所以我想要左上角的小用户图标，下面是用户名和分数。我希望表格向右(相同高度)，但我希望能够在必要时滚动表格，但用户信息保持静态。

编辑 这里是包含 row 实现的代码，但当窗口宽度为 3/4 时，它们仍然只停留在同一行中。

<div id="wrapper">
    <div style="margin: 1em">
        <h4>User Card</h4>
        <div>
            <div class="row">
                <div class="col-lg-1">
                    <h6>User: {{username.slice(5)}}</h6>
                    <h6>Total Threat Score: {{totalscore.toFixed(3)}}%</h6>
                </div>
                <div class="col-lg-3">
                    <table class="table table-hover table-striped">
                        <thead>
                            <th>#</th>
                            <th>Risk Model</th>
                            <th>Score</th>
                        </thead>
                        <tr data-ng-repeat=" item in infractions | orderBy : '-score' | limitTo : 10 " ng-click="launchIAT()" ng-style="setColor(item.score)">
                            <td>{{$index + 1}} </td>
                            <td>{{item.name.replace("_"," ")}}</td>
                            <td>{{item.score.toFixed(3)}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我这里有一个粗略的工作示例:

http://www.bootply.com/xWByEnAkXE

基本上，您的 3/4 宽度问题与您使用的列标签有关。您使用的 col-lg-* 仅在浏览器窗口较宽时适用，这导致您在浏览器窗口较大时仅停留在同一行中。

除非您使用 overflow:scroll 在表格上设置明确的 CSS 高度，否则表格的高度很棘手。

我的示例在表格上使用 position:absolute 将高度设置为父级的 100%(使用 top:0;bottom:0)。它并不漂亮，如果您尝试在其中做太多高级的事情，它很容易崩溃，但它可以完成工作。

希望对您有所帮助!

编辑: 调整示例以使用媒体查询。