CSS混合相对高度和绝对高度

有没有一种方法可以同时使用px中的绝对高度和html div元素的相对高度？我想创建一个导航栏，并希望内容div使用其余部分

我已经创建了一个。机器人需要分配剩余的高度。在本例中，它有一个不需要的滚动条

编辑： 我越是意识到这似乎是一个真正的问题。我当然不想把边距延伸到所有嵌套的层次

编辑2：

---

我正在寻找一个解决方案，允许我将.bot拆分为两个高度相等的div，这意味着bot div不能被顶部的div覆盖。我已经找到了一个使用calc的解决方案，但以前从未听说过，并且不确定是否保存以供使用。

您可以通过向添加margin top-ve值并添加一个空div来指定高度来操作输出

HTML

---

关于第一个问题：

.top {
 width: 100%;
 height: 40px;
 position: absolute;
}
.bot {
 height:100%;
 width:100%;
 margin-top:40px;
}

---

对于第二个问题，它适用于它的父元素，除非它是固定创建的。

这肯定会帮助您解决。。。在ie、ff、chrome上测试

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
}

.top {
    height: 7%;
    min-height: 38px;
    max-height: 38px;
    background-color: green;
}

.bot {
    height: 93%;
    background-color: blue;
    position: relative;
}

.half {
    height: 50%;
    background-color: pink;
    position: relative;    
}

.half2 {
    height: 50%;
    background-color: yellow;
    position: relative;    
}

---

就浏览器兼容性而言，我不确定这是一个多么好的答案，但似乎在chrome中起作用。显然，有一个calc函数可以在css中动态更新结果。有人能对此解决方案发表意见吗？

我通常只是作弊，让正文背景颜色与页脚最底部的背景颜色匹配：-800+修订？天哪……如果你能给我们提供你想要的输出的图像，并对他们应该做什么做进一步的解释，对我们来说可能会更容易。请参阅下面使用calc的我的答案。这就是它的外观，至少如果你使用Chrome；不确定它在其他浏览器中的外观。当窗口高度改变时，固定大小的标题+2个相同大小的刻度下面的刻度是我想要的…谢谢。见我对帕夫洛回复的评论。你的建议似乎不起作用，我承认我应该提到这一点。谢谢你的回复。如果通过插入2x50%高度的div将其拆分，bot将无法获得100%-40px的空间。上面的一个将有更少的空间40px，因为它流入到上面的一个下面。这是由于您在两个div上面添加了行文本。去掉这个，比率应该是固定的。你有JSFIDLE吗？我以前试过，但没办法让它这样工作……是我一个人，还是在蓝色的上面有一个白色的条带？出于某种奇怪的原因，如果你去掉页边空白，它就消失了。我想它不能正常工作。对我来说，这通常是可行的，我想我没有包括css重置，我通常用来修复像这样的大多数问题。这可能有效：很好的尝试。我自己也在玩弄这个想法，但是如果你放大窗口，使10%>40px，它就失败了。我可能犯了一个错误，但我不能让它起作用：看到不是50%的黄色方块。仍然不起作用黄色方块比粉色方块小。我想我有一个使用calc的解决方案，但无论如何，感谢您抽出时间回答这个问题。如果你支持Opera，你可能会想要其他东西。很好的概述。我对Opera并不太在意，尤其是因为在不久的将来，它们将与Webkit一起推出。

.top {
 width: 100%;
 height: 40px;
 position: absolute;
}
.bot {
 height:100%;
 width:100%;
 margin-top:40px;
}

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
}

.top {
    height: 7%;
    min-height: 38px;
    max-height: 38px;
    background-color: green;
}

.bot {
    height: 93%;
    background-color: blue;
    position: relative;
}

.half {
    height: 50%;
    background-color: pink;
    position: relative;    
}

.half2 {
    height: 50%;
    background-color: yellow;
    position: relative;    
}