Question

我的网站旁边有一个顶部导航栏，标题，侧边栏和内容正文。标题，侧边栏和内容正文绝对定位，以便在您导航到使用相同模板的其他页面时它们不会移动。侧边栏和内容正文有滚动条。即使滚动，标题和侧边栏也始终可见。这很有效，如演示中所示。但假设顶部导航改变了高度。然后垂直对齐关闭。由于此站点使用的是其他站点中使用的全局顶部导航，因此顶部导航可随时更改。当它确实发生变化时，这种布局将不会成为未来的证据。有没有办法让这个未来证明？

我目前的情况： http://codepen.io/codingninja/pen/nKwox

body {
    margin: 0;
    padding: 0;
}  
.content {
    /*position: relative;*/
}
.top-nav {
    background: #000;
    height: 42px;
    color: #fff;
}
.header{
    position: absolute;
    height: 100px;
    width: 100%;
    background: #ddd;
}
.sidebar {
    position: absolute;
    top: 142px;
    left: 0;
    bottom: 0;
    background: #aaa;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100px;
}
.body {
    position: absolute;
    top: 142px;
    right: 0;
    left: 150px;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

顶部导航栏改变高度时会发生什么： http://codepen.io/codingninja/pen/nICzK

.top-nav {
    background: #000;
    height: 100px;
    color: #fff;
}

Answer 1

您可以使用display:table来实现所需的布局，而不是绝对定位所有内容。使用以下html

<div class="table">
    <div id="top-nav" class="row">
        <div class="cell">top-nav</div>
    </div>
    <div id="header" class="row">
        <div class="cell">header</div>
    </div>
    <div id="content" class="row">
        <div class="cell">
            <div class="table">
                <div id="side-bar" class="cell">     
                    <div class="overflow">
                        sidebar
                    </div>
                </div>
                <div id="body-content" class="cell">
                    <div class="overflow">body-content</div>
                </div>
            </div>
        </div>
    </div>
</div>

和Css

html, 
body, 
.table {height:100%; padding:0; margin:0;}

.table {display:table; width:100%;}
.table .row {display:table-row;}
.table .cell {display:table-cell;}

#top-nav {height:42px;}
#header  {height:100px;}
#content  {height:100%;}

#side-bar {width:100px;}

.overflow {height:100%; overflow:auto;}

Example

您会注意到，当您的顶级导航增长时，您的主要内容区域将缩小。你也不会陷入定位/ z指数的噩梦

Answer 2

你的意思是：
Css3具有Calc()函数

Height: Calc( 100% - 100px )

Answer 3

我找到了一个解决方案，它涉及一行javascript，根据顶部导航和标题的高度将顶部设置为计算出的高度。

$(".sidebar, .body").css('top', topnavheight+100);

高度100％减去顶部导航

3 个答案: