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

【问题标题】：How can I restrict the height and width that a container takes?如何限制容器的高度和宽度？
【发布时间】：2016-04-22 22:43:22
【问题描述】：

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

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

在我的 ASP.NET MVC 应用程序中，我在视图 (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

【问题讨论】：

可以发截图或者jsfiddle吗？
你想把它们放在一起吗？
对于container 尊重以百分比给出的高度，它的父级也必须有一个，如果它也以百分比给出，下一个父级等。你能告诉它是否是案例？
您的第二个选项是使用视口单位vh 设置containers 高度，因此如果您的 25% 大约是视口的 25%，那应该适合您
@rogerdeuce：如果你的意思是水平的，不；垂直很好，我只想限制复选框占用的大小（宽度和高度）。

标签： html css asp.net-mvc twitter-bootstrap razor

【解决方案1】：

考虑改用选择。我认为这是一个很好的选择，可以像您所做的那样将许多复选框放在可滚动的 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>

【讨论】：

虽然@LGSon 所说的完全正确，但这确实部分解决了问题。它创建“列表框项目”而不是复选框。我需要复选框。用户只能选择一个。
当然，如果其他人想要列表框，我也会发布此内容
@B.ClayShannon 如果您的主要要求是“只能选择一个”，则从此答案中的 select 元素中删除 multiple 属性将解决该问题。

【解决方案2】：

为容器设置一个浮点数将允许您设置宽度和高度。

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

编辑

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

【讨论】：

不，如果 OP 想要使用百分比，这还不够，正如问题中明确指出的那样。