Question

我有以下CSS，可以让我的页面居中

#mainholder {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width:1000px;
    background-color:#FFFFFF;
    min-height:1100px;
    z-index:1;
    clear:both;
}

在#mainholder div中，我有另一个DIV，其中包含我的数据，这些数据将根据内容增加或减少高度。 CSS位于

之下

#maincontentdiv {
    position:absolute;
    width:955px;
    min-height:795px;       
    border-style:solid;
    border-width:thin;
    border-collapse:collapse;
    left:10px;
    top: 135px;     

}

我遇到的问题是，虽然#maincontentdiv按预期延伸，但#mainholder不会延伸#maincontentdiv的内容。我想知道如何解决这个问题或者有什么其他选择。

非常感谢所有帮助感谢

修改

根据要求，这是HTML代码

<div id="mainholder">
  <div id="topnavbar">
    <div id="navlinks">

    </div>

  </div>
  <div id="messagediv">

  </div>
  <div id="maincontentdiv">
    <table width="100%" border="0">
      <tr bgcolor="#507CD1">
        <td width="19%">Grant ID</td>
        <td width="61%">Grant Description</td>
        <td width="20%">Manage</td>
      </tr>
      <?php 
      $select = " SELECT QUERY THAT WILL CHANGE THE LENGTH OF THE DIV DEPENDING ON RESULTS

";
     $query = sqlsrv_query($conn,$select,array(),array("Scrollable"=>SQLSRV_CURSOR_STATIC))or die(print_r(sqlsrv_errors()));
     while($row=sqlsrv_fetch_array($query))
     {
        //variables
       ?>
      <tr>
        <td><?php echo $variable ?></td>
        <td><?php echo $variable ?></td>
        <td>&nbsp;</td>
      </tr>
      <?php }?>
    </table>
  </div>
  <br style="clear:both"/>
</div>

Answer 1

你的内部div有position:absolute。所以它的位置不会影响父div。

#maincontentdiv {
    position:absolute;
    width:955px;
    min-height:795px;       
    border-style:solid;
    border-width:thin;
    border-collapse:collapse;
    left:10px;
    top: 135px;     

}

将此更改为

#maincontentdiv {
    position:relative;
    width:955px;
    min-height:795px;       
    border-style:solid;
    border-width:thin;
    border-collapse:collapse;
    margin-left:10px;
    margin-top: 135px;     
}

如果您仍然遇到问题，请告诉我。

用内容拉伸相对定位的DIV

1 个答案: