如果没有设置高度，如何避免div获得整页大小？

Question

我的布局有问题。我目前有一个display: none和position: fixed div，当您点击页面中的按钮时会显示该div。在这个div中有一个按钮表供用户选择。

我遇到的问题是，如果我没有为此窗口设置高度，它将变为整页大小，它将变为整页高度。这对我来说是一个问题，因为按钮编号将会改变，我将不能为每一个使用固定的高度。

我制作了一些小提琴，第一个是设置了高度的div：http://jsfiddle.net/gbRzt/ 第二个没有设置高度：http://jsfiddle.net/gbRzt/1/

这与问题无关，但这也是我遇到的问题。在最后一行按钮中，＃7和＃8不居中。有没有办法让他们像其他人一样居中？

Answer 1

你应该在top上摆脱bottom和.bankingDialog，position: absolute;在这种情况下也是比fixed更好的选择。

.bankingDialog {
    position: absolute;
    display: none;
    left: 0;
    right: 0;
    margin: auto;
    width: 800px;
    height: 500px;
    padding: 1em;
    z-index: 200;
    background-color: #fff;
    border-radius: 15px;
}

您无关的问题的答案：

看看这个 jsFiddle 。您在不需要时使用段落和表格。只用div来做你想做的事情要容易得多。

<强> HTML

<div class="bankingDialog" id="bankingWeaponsDialog">
    <div class="centerer">
        <div class="bankingbuttons">Lorem Ipsum</div>
        <div class="bankingbuttons">Bot #1</div>
        <div class="bankingbuttons">Bot #2</div>
        <div class="bankingbuttons">Bot #3</div>
        <div class="bankingbuttons">Bot #4</div>
        <div class="bankingbuttons">Bot #5</div>
        <div class="bankingbuttons">Bot #6</div>
        <div class="bankingbuttons">Bot #7</div>
        <div class="bankingbuttons">Bot #8</div>
    </div>
</div>

<强> CSS

.bankingDialog {
    text-align: center;
}
.centerer {
    width: 600px;
    margin: 0px auto;
}
.bankingDialog .bankingbuttons:first-child {
    display: block;
}
.bankingDialog .bankingbuttons {
    display: inline-block;
}
.bankingDialog2 {
    margin: 0 auto;
    width: 500px;
}

Answer 2

试试这个：

会产生这个：

请注意，如果您希望将div#rightCol和div.bankingDialog左对齐并避免div.bankingDialog超过div#rightCol，则可以div.bankingDialog一个{ {1}} margin-left的{​​{1}}宽度。或者将div#rightCol和div#rightCol放在同一级别，同时执行div.bankingDialog。

编辑：如果你想要任何容器可滚动，你可以这样做：

http://jsbin.com/anixeq/1/