如果沒有設置高度，如何避免div獲得整頁大小？

Question

我的布局有問題。 我目前有一個display: none和position: fixed當你點擊頁面中的按鈕時顯示的position: fixed div。 在這個div中有一個按鈕表供用戶選擇。

我遇到的問題是，如果我沒有為這個窗口設置一個高度它會變成整頁大小，它會變成整頁高度。 這對我來說是一個問題，因為按鈕編號將會改變，我將不能為每一個使用固定的高度。

我做了一些小提琴，第一個是高度設置的div： http ： //jsfiddle.net/gbRzt/第二個沒有高度設置： http ： //jsfiddle.net/gbRzt/1/

這與問題無關，但這也是我遇到的問題。 在最后一行按鈕中，＃7和＃8不居中。 有沒有辦法讓他們像其他人一樣居中？

Answer 1

你應該擺脫.bankingDialog的top和bottom ， 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一個div#rightCol margin-left div#rightCol的寬度margin-left 。 或者將div#rightCol和div.bankingDialog放在同一級別並同時執行float: left 。

編輯：如果你想要任何容器可滾動你可以這樣做：

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