在div中选择列表高度100%

时间:2017-10-07 18:49:26

标签: html css

我在div中有这个选择列表,我想将高度设置为100%,而不是选择的大小编号(size = 10)。 我该怎么办?

我的代码:

<div style="top:18%; left:5%; width:25%; height:40%; background: rgba(0,204,0,1); position:absolute; border:#0000FF solid 1px;">
  <table width="100%" height="10%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="left" valign="middle">Header</td>
    </tr>
  </table>  
  <div>
  <form id="form2" name="form2" method="post" action="">
      <select name="selectList" id="selectList" size="10" style="width:100%; height:50%; overflow-y:scroll;">
        <?php
        $qry= pg_query($dbconn,"select * from table") or die(pg_last_error($dbconn));
        while($row_qry = pg_fetch_assoc($qry)){
        ?>
        <option value="<?php echo $row_qry['id']; ?>"><?php echo $row_qry['name']; ?></option>
        <?php } ?>
      </select>   
  </form>  
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

将HTML和正文的高度设置为100%。 您的代码未正确嵌套 这是工作代码

 <html>
   <head>
     <style>
       html, body {height: 100%;}
     </style>
   </head>
 <body>
    <div style="top:18%; left:5%; width:25%; height:40%; background: rgba(0,204,0,1); position:absolute; border:#0000FF solid 1px;">
       <table width="100%" height="10%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="middle">Header</td>
          </tr>
      </table>  
      <form id="form2" name="form2" method="post" action="" style="height: 90%">
          <select name="selectList" id="selectList" size="10" style="width:100%; height:100%; overflow-y:scroll;">
              <option value=""></option>
          </select>   
        </form>  
       </div>
   </body>
 </html>