1

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

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

编辑：我读得越多，我就越意识到这似乎是一个真正的问题。我当然不打算将边距带到所有嵌套级别......

Edit2：我正在寻求一种解决方案，该解决方案允许我.bot分成两个等高的 div，这意味着机器人 div 不能只被顶部的 div 覆盖。我找到了一个解决方案（使用calc），但以前从未听说过它，并且不确定它是否可以保存以供使用。

4

4 回答 4

0

您可以通过添加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;
}

演示

于 2013-02-15T05:44:16.563 回答
0

对于第一个问题：

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

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

于 2013-02-15T06:47:48.440 回答
0

这肯定会帮助你......在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;    
}
于 2013-02-15T07:02:13.193 回答
0

I'm not sure how good of an answer this is in terms of browser compatibility, but this seems to be working in chrome. Apparently, there's a calc function that dynamically updates the result in css. Can anyone comment on this solution?

于 2013-02-15T07:05:29.147 回答