Question

有没有办法同时使用html div元素的绝对值（以px为单位）和相对高度？我想创建一个导航栏，并希望其余部分由内容div使用。

我创建了jsfiddle（.bot需要分配剩余高度）。在示例中，它有一个不受欢迎的滚动条。

编辑：我read about it越多，我越发现这似乎是一个真正的问题。我当然不打算将余量延伸到所有嵌套级别......

EDIT2：我找到了一个解决方案，允许我将.bot分成两个相等的高度div，这意味着bot div不能只被顶部div重叠。我找到了一个解决方案（使用calc），但之前从未听说过，并且不确定是否可以使用它。

Answer 1

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

HTML

 <div class='top'>
        some top stuff...
    </div>

    <div class='bot'>
      <div class="space"></div>        
     some bot stuff...
    </div>

<强> CSS

.space{height:40px}
.bot {
    margin-top:-40px;
    z-index:0;
    height: 100%;
    background-color: blue;
    position: relative;
}

<强> DEMO

Answer 2

第一个问题：

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

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

Answer 3

这肯定会帮助你...测试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;    
}

Answer 4

我不确定这在浏览器兼容性方面有多好，但this似乎在Chrome中有效。显然，有一个calc函数可以动态更新css中的结果。任何人都可以评论这个解决方案吗？

CSS混合相对和绝对高度

4 个答案: