如何限制容器的高度和宽度？

Question

我正在使用一个类来包含动态创建的复选框数组，最初是：

.container {
    border: 2px solid #ccc;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

在我的ASP.NET MVC应用程序中，我在View（Index.cshtml）中有以下代码：

<div class="container">
    @foreach (var item in rows)
    {
        <input id="ckbx_@(item.unit)" type="checkbox" value="@item.unit" />@item.unit<br />
    }
</div>

这会导致容器简单地环绕整个复选框组，但我想限制它的高度和宽度。容器占用了所有可用的空间，占可用区域宽度的50％，因为它位于自举“6”列中：

<div class="col-md-6" name="unitsCheckboxDiv">
    <h4>Select a Unit</h4>
    <div class="container">
        @foreach (var item in rows)
        {
            <input id="ckbx_@(item.unit)" type="checkbox" value="@item.unit" />@item.unit<br />
        }
</div>
. . .

我认为减少容器类的宽度和高度百分比可以解决这个问题：

.container {
    border: 2px solid #ccc;
    width: 50%;
    height: 25%;
    overflow-y: scroll;
}

......但没有区别。

如何将高度和宽度限制为当前扩展的一小部分？

更新

以下是“Win”的截图：

列表一直向下，为“里程”。

更新2

这削减了芥末：

<label class="control-label">Select a Unit</label>
<select class="form-control, container">
    @foreach (var item in rows)
    {
        <option id="ckbx_@(item.unit)" value="@item.unit">@item.unit</option>
    }
</select>

...所以正确的答案是平局：Quan Do和LGSon

Answer 1

考虑使用select。我认为这是一个很好的选择，可以像你所做的那样在可滚动的div中放入许多复选框。

<div class="col-md-6">
    <label class="control-label">Select a Unit</label>
    <select class="form-control">
        @foreach (var item in rows)
        {
            <option id="ckbx_@(item.unit)" value="@item.unit">@item.unit</option>
        }
    </select>
</div>

Answer 2

设置浮动到容器将允许您设置宽度和高度。

.container {
    float:left;
    border: 2px solid #ccc;
    width: 100%;
    height: 400px;
    overflow-y: scroll;
}

修改

这应该可以解决问题但是要设置容器高度百分比，你应该看看Percentage Height HTML 5/CSS