Question

我正在尝试整理一个包含四个区域的网页：页眉，页脚，内容和控件。页眉和页脚应分别固定在页面的顶部和底部，并自动调整其内容的大小。控件应位于页面的最右侧（页眉和页脚之间的垂直方向），并且是固定宽度的。内容区域应填充页面的其余部分。

我有这个工作，但现在每当我添加任何类型的内容（甚至只是一个单词段落元素），控件区域几乎移动到页面的最底部。您可以在此处查看我所指的内容：http://jsfiddle.net/ym8vY/1/

如果我将控件div完全清空，则会完全按照我的要求进行说明：http://jsfiddle.net/ym8vY/

我的body目前看起来像是：

<header>
    <p>Header</p>
</header>
<div class="main">
    <div id="streamGraph" class="page">
        <div class="page-row">
            <div class="page-content-container-outer">
                <div class="page-content-container-inner">
                    <div id="graphContainer" class="page-content"></div>
                </div>
            </div>
            <div class="page-controls-container-outer">
                <div class="page-controls-container-inner">
                    <div class="page-controls"><!-- If anything goes inside here, it breaks -->
                        <div style="display: table; height: 100%;"> 
                            <div style="display: table-row; height: 0;">
                                <div>
                                    <label for="sampleCount"># Samples:</label>
                                    <input type="text" id="sampleCount" name="sampleCount" value="100" />
                                </div>
                                <div>
                                    <label for="tagCount"># Tags:</label>
                                    <input type="text" id="tagCount" name="tagCount" value="25" />
                                </div>
                                <div>
                                    <label for="fromDate">From:</label>
                                    <input type="date" id="fromDate" name="fromDate" />
                                </div>
                                <div>
                                    <label for="toDate">To:</label>
                                    <input type="date" id="toDate" name="toDate" />
                                </div>
                                <button id="tagsButton">Customize Tags</button>
                                <button id="refreshButton">Apply</button>
                            </div>
                            <div style="display: table-row;">
                                <div id="tagContainer" style="overflow: auto; height: 100%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer>
    <p>Footer</p>
</footer>

我的CSS是：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    display: table;
}
header, .main, footer {
    display: table-row;
    width: 100%;
}
header, footer {
    background: lightgray;
}
.main {
    height: 100%;
}
.page {
    height: 100%;
    display: table;
}
.page-row {
    display: table-row;
    width: 100%;
}
.page-content-container-outer {
    display: table-cell;
    width: 100%;
    height: 100%;
    padding: 10px;
}
.page-controls-container-outer {
    display: table-cell;
    height: 100%;
    padding: 10px;
}
.page-content-container-inner {
    border: solid;
    border-color: gainsboro;
    border-width: 5px;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    padding: 5px;
}
.page-controls-container-inner {
    border: solid;
    border-color: gainsboro;
    border-width: 5px;
    border-radius: 10px;
    height: 100%;
    padding: 5px;
}
.page-controls {
    height: 100%;
    width: 300px;
}
.page-content {
    height: 100%;
}

Answer 1

你的右侧div正被推到基线。添加vertical-align:top以修复它：

div
{
    vertical-align: top;
}

JSFiddle

旁注： vertical-align的默认值是基线。使用单元格和内联块时，请始终牢记这一点。

Answer 2

将vertical-align:top;添加到您的.page-controls-container-outer班级

Answer 3

更改此

<div style="display: table-row; height: 0;">

到这个

 <div style="display: table-row; height: 0; float:left;">

div转移到页面底部的任何内容

3 个答案:

JSFiddle