Css 高度100%减去顶部导航

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

我目前拥有的：

当顶部导航改变高度时会发生什么情况：

你的意思是：
Css3有一个函数

---

您可以使用

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>

---

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

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

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

---

您选择将所有内容都定位为绝对位置是有原因的吗？我需要边栏和标题在您滚动时保持可见。有没有更好的方法来实现这一点？最好使用

position:fixed

在滚动时保持页眉和侧边栏可见。但是，与

position:absolute

类似，它将内容从正常文档流中移除，这就是为什么您首先需要使用固定数字定位内容的原因。我猜

position:sticky

将来可能会用来解决这个问题（因为它只在Firefox上受支持）。position:fixed不太好，因为当你水平滚动时，它看起来会很混乱。同样在移动设备上，它也会看起来一团糟。谢谢你。我不想这样做，因为我必须设置一个100px的高度。我想有一种方法，使它不在乎什么高度的黑色导航栏是因为它可以改变。黑色导航在包括本网站在内的一系列网站中都是全球性的。自从我开始工作以来，我们已经更改了一次黑色导航。实际上，这可能会有问题，因为我无法将topnav放入表结构中。我只能控制topnav之后的一切：（可能还有其他方法吗？我想如果你无法更改代码布局，那么你可能需要使用一些js，因为没有其他方法可以计算顶部导航的高度-啊，正如你回答的那样。我在下面写了一个JavaScript解决方案，对我来说很有效。谢谢Pete。

Height: Calc( 100% - 100px )

<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>

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;}

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