Question

我有一个<div>，我需要两个div。一个应该是30px高另一个应该填写div的其余部分（这个也会溢出）

 -----------------
|                 |
 -----------------
|                 |
|                 |
|                 |
 -----------------

我试过这样做：

<style> 
.grayBox{ 
    position: fixed; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.7; 
    opacity:.70; 
    filter: alpha(opacity=70); 
} 
.box_content { 
    direction:rtl;
    text-align:right;
    position: fixed; 
    top: 25%; 
    left: 25%; 
    right: 25%; 
    width: 50%; 
    height:50%;
//    padding: 16px; 
    z-index:1002; 
    overflow: no; 
} 

.close {
    background-color:white;
    font-weight:bold;
    font-size:10pt;
    padding-top:5px;
    height:30px;
    cursor:pointer;
    text-align:center;
}

</style> 

<div id="grayBG" class="grayBox" style="display:none;"></div> 
<div id="LightBox1" class="box_content" style="display:none;">
    <div onclick="displayHideBox('1'); return false;" class="close">סגור</div>
    <div style="overflow:auto; height:100%;">
    <table width="100%" cellpadding="0" cellspacing="0" border="0"> 
        <tr align="right"> 
            <td colspan="2" bgcolor="#FFFFFF" style="padding:10px;">
                <%
                strSQL="SELECT * FROM tblMainCats WHERE id=50"
                rs.CursorType = 2
                rs.LockType = 3
                rs.Open strSQL, strCon
                %><%=rs("PartContent")%><%
                rs.close
                %>
            </td> 
        </tr> 
    </table> 
    </div>
</div>

~~在sotiris向我展示之后 - 如果我按照你们的说法行事，这就是我得到的： http://jsbin.com/ebusu3/3~~

Answer 1

你可以通过给它一个顶部和一个底部来指定div的高度，并让浏览器找出其余部分。

所以：

Top div：

{
  position:absolute;
  height:30px;
}

底部div：

{
  position:absolute;
  height:auto;
  top:30px;
  bottom:0px;
}

Answer 2

你可以使用百分比高度。如果您的容器的高度为300像素，那么顶部div将为height:10%;，而底部为height:90%;

要查找顶部div的高度，请使用经典公式：

3000（30像素* 100）/您的总数高度

实例：http://jsbin.com/ebusu3

Answer 3

第一部：

{
height: 30px;
}

第二

{
height: auto;
position: relative;
}

在jQuery中你可以这样做：

var H = $('#container').outerHeight() - 30;
$('#secondDiv').height() = H;

css divs 2行1静态1动态高度

3 个答案: