html - 将 div 的高度设置为其父项的高度

Question

我有一个 div “linkBut​​ton”，它有一个输入字段。我无法为此 div 设置高度。主要的 div 高度应该根据内容。我不想为此 div 硬编码任何高度。

我为此创建了一个 jsfiddle:http://jsfiddle.net/v2hMm/80/

注意:红色 div 的高度应与父内容相同，">" 符号应在中间.

 <div class="scrolldiv">
<div class="content" id="1">

  <div class="leftColumn">

  <div class="show" id="capInfo">

    <div class="label1">
      Apple CAP Contacts:
    </div>

    <div class="label2">
      <p>
        CAP Lead:
        <span class="LeadName">
          Keshab Patro
        </span>
        <span class="LeadEmail">
          kpatro@apple.com
        </span>
      </p>
    </div>

    <div class="lable3">
      <p>
        Verification Lead:
        <span class="vLeadName">
          Siva Rama Kiran Yanamandra
        </span>
        <span class="vLeadEmail">
          syanamandra@apple.com
        </span>
      </p>
    </div>

  </div>

  </div>

  <div class="rightColumn">

    <div class="rightGroup">

      <div class="groupproto">

        <p>
          <span class="protocolname show">
            PROTOCOL BY NAG ON 25/10
          </span>

          <span class="date_class show">
            OCT 28 - 31, 2013
          </span>
        </p>

      </div>

      <div class="statusClass hidden">
      </div>

      <div class="approvedFinding show">
      </div>

      <div class="closedFinding show">
      </div>

      <div class="verifiedFinding show">
      </div>

      <div class="lasActivity show">
      </div>

    </div>

    <div class="linkButton">

      <input type="button" class="lplinkbutton" value="&gt;" onclick="top.openPageURL('Pushinfolet?id=101693&amp;proc=104180&amp;flag=1&amp;emd=2&amp;accessflag=2&amp;edit_flag=Y&amp;wrapper=no')">

    </div>

  </div>

</div>

<Style>
      html{
      min-height: 100%;
      }
      .headingsection {
      font-weight: 600;
      font-size: 23px;
      padding-bottom: 5;
      padding-top: 0;
      margin-top: 0;
      }
      body {
      min-height: 100%;
      font-family: "Avenir Next", "Avenir", "Helvetica Neue", "Lucida Grande", Arial, sans-serif !important;
      }
      .mycustcls{
      background-color:  white;
      padding-left:  5;
      }
      .sectionheader{
      background-color:  rgba(173, 172, 172, 0.94);
      border:  2px solid rgba(0, 0, 0, 0.03);
      padding-left: 3px;
      color:  white;
      font-weight:  500;
      font-size:  15px;
      }
      .sectionspacer{
      height:20;
      }
      .sectionrows{
      background-color:  rgba(240, 240, 240, 0.93);
      padding:  10;
      padding-right: 0;
      overflow:  hidden;
      }
      .colsheader{
      height:  auto; 
      color:  white;
      font-weight:  500;
      font-size:  14px;
      float:  left;
      }
      .sectioncols{
      width:  300px; 
      height:  auto; 
      float:  left;
      color:  black;
      font-weight:  normal;
      font-size:  13px;
      }
      .mainsection{
      padding:10px;
      }
      .anotherspacer{
      background-color:  rgba(231, 231, 231, 0.72);
      }
      .rowseparator{
      border: 2px solid #CFCFCF;
      }
      .content { clear: both; font-size: 13px;}
      .Separator {border-top: 2px solid #B8B8B8;}
      .date_class { float:right; }
      .rightGroup { float: left; width:80%;}
      .linkbutton{float: right;width: 30;border:0;  max-height: 200px;}
      .anchor{cursor:pointer;font-weight:500;}
      .lplinkbutton{
      float: right;
      cursor:pointer;
      border:0;
      font-weight: 500;
      font-size: 15;
      background-color: red; 
      width : 30px
      }
      .scrolldiv{
      overflow-x: auto;
      background-color  : rgba(240, 240, 240, 0.93);
      color: black;
      border: 2px solid rgba(0, 0, 0, 0.25);
      }
      .colfacility_id,.colfacility_name{
      font-weight:600;
      text-decoration:underline;
      }
      .colfacility_id,.colfacility_local_name,.colfacility_address,.colcity,.collongitude{width:500px;padding-top:2px;}
      .colprotocol_name{
      font-weight:500;
      margin-left: 50px;
      width:500px;
      }
      .hidden{display:none;}
      .colname{font-weight:600;}
      .colfacility_address.colfacility_local_name,.colname{padding-top:5px; width: 235px;}
      .offlineclass{width:170px;color:black;font-size:  13px;} 
      .downloadasmnt{
      width: 73px;
      height: 29;
      border: 1px solid rgb(49, 120, 153);
      border-radius: 6;
      background-color: rgba(173, 172, 172, 0.94);
      color: white;
      font-weight: 500;
      }
      .datefloat{
      color: #666;
      font-size: 12px;
      }
      .datefloat,.offlineclass{
      font-weight:normal;
      float:right;
      }
      /*div.tt_upcoming.sectionheader{
      background-color: rgba(240, 240, 240, 0.93);
      color: black; 
      border: 2px solid rgba(0, 0, 0, 0.25);
      }*/
      .sectionheader u.anchor{
      text-decoration:none;
      font-size: 17;
      margin-left: 6;
      }
      .protocoldate{
      padding: 0;
      margin: 0;
      border-bottom: 1px solid;
      }
      .tt_upcoming.sectionheader{
      background-color: rgba(240, 240, 240, 0.93) !important;
      color: black !important;
      }
      .leftColumn { float: left; width: 40%; padding: 10px 0 10px 10px;}
      .rightColumn { float: right; width: 50%; padding:0;}
      .rightColumn .rightGroup { padding-top: 10px; }
      .label1, .protocolname { font-weight: 500; }
      .content p { margin: 5px 0;}
      .groupproto { line-height: 0; padding-top: 4px;}
      .show{ display: block;}
      .groupproto { border-bottom: 1px solid #5C5C5C; margin-bottom:5px; }
      .label1 { text-decoration:underline; }
      .lasActivity ul { padding-left: 18px !important;}

</style>

Answer 1

将输入的 position 设置为 absolute 然后你可以使用 top:0 获得完整的高度; bottom:0; 并使用 right:0; 将输入放在右侧，您需要将父 position 设置为 relative 也是。

编辑这些类:

jsFiddle

.lplinkbutton {
cursor: pointer;
border: 0;
font-weight: 500;
background-color: red;

/* added */
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 20px;
}

.scrolldiv {
position: relative;   /* added  */
overflow-x: auto;
background-color: rgba(240, 240, 240, 0.93);
color: black;
border: 2px solid rgba(0, 0, 0, 0.25);
}