绝对位置div中的内容溢出

Question

我有一个奇怪的问题，也许它更适合CSS粉丝，但是为什么绝对定位的div中的内容会溢出其他所有内容？

这里提供的示例（作为图片）显示内容溢出蓝色边框div。这个框中的内容应该正确地定义div的高度不？如何纠正这种情况，使我的“蓝色”框符合其内容？

以下是有问题的标记：

* {
  box-sizing: border-box;
  font-family: Verdana, Arial, sans-serif;
  font-size: 9pt;
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: rgb(105, 105, 105);
}

#table-container {
  display: table;
  text-align: center;
  width: 100%;
  height: 100%;
}

#container {
  display: table-cell;
  vertical-align: middle;
}

#wrapper {
  padding: 25px;
}

.tabs {
  position: relative;
  margin: 40px 0 25px;
}

.tab {
  float: left;
}

.tab label {
  background: rgb(105, 105, 105);
  padding: 10px;
  border: 1px solid transparent;
  color: #FFF;
  margin-left: -1px;
  position: relative;
  left: 1px;
  top: -26px;
}

.tab label:hover {
  background: #000;
}

.tab [type=radio] {
  display: none;
}

.content {
  position: absolute;
  top: -1px;
  left: 0;
  background: rgb(222, 222, 222);
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid transparent;
  opacity: 0;
  color: rgb(58, 58, 58);
}

[type=radio]:checked~label {
  background: rgb(222, 222, 222);
  font-weight: bold;
  border-bottom: 1px solid transparent;
  color: #000;
  z-index: 2;
}

[type=radio]:checked~label~.content {
  z-index: 1;
  opacity: 1;
}


/* CSS for Table and Field styling */

.table {
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: left;
}

.table td {
  border: 1px solid #000;
}

.inputbox {
  border: 1px solid rgb(170, 170, 170);
  width: 100%;
}

.inputbox:hover {
  border: 1px solid rgb(109, 109, 109);
}

.input {
  border-style: none;
  border-color: inherit;
  border-width: 0;
  padding: 3px;
  height: 20px;
}

input[type="text"],
textarea {
  width: 100%;
  box-sizing: border-box;
}

.input:focus {
  background: rgb(255, 255, 196);
}

<div id="table-container">
  <div id="container">
    <div id="wrapper">

      <div style="border: 1px solid red; text-align: left; font-size: 8pt; color: #fff;">Choose language/Choisissez langue:</div>
      <div style="border: 1px solid blue; height: 100%;">
        <div class="tabs">

          <!-- TAB [1] -->
          <div class="tab">

            <input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1">English</label>
            <div class="content">

              <table class="table">
                <tr>
                  <td>Traveller's Name:</td>
                  <td colspan="2">
                    <div class="inputbox"><input type="text" id="tname" class="input" name="Name of Traveler" tabindex="1" /></div>
                  </td>
                  <td style="width: 15%;"></td>
                  <td>Tan #:</td>
                  <td></td>
                </tr>
                <tr>
                  <td>Destination:</td>
                  <td colspan="2">
                    <div class="inputbox"><input type="text" id="location" class="input" name="Location" tabindex="2" /></div>
                  </td>
                  <td></td>
                  <td>Status:</td>
                  <td></td>
                </tr>
                <tr>
                  <td>iTravel Trip Number:</td>
                  <td colspan="2">
                    <div class="inputbox"><input type="text" id="location" class="input" name="Location" tabindex="2" /></div>
                  </td>
                  <td></td>
                  <td>Date Issued:</td>
                  <td>
                    <div class="inputbox"><input type="text" id="dissued" class="input" disabled/></div>
                  </td>
                </tr>
                <tr>
                  <td>Event Plan ID Code:</td>
                  <td colspan="2">
                    <div class="inputbox"><input type="text" id="evt-plan-code" class="input" name="Event Plan ID Code" tabindex="4" /></div>
                  </td>
                  <td></td>
                  <td>Issued by:</td>
                  <td>
                    <div class="inputbox"><input type="text" id="issuer" class="input" disabled/></div>
                  </td>
                </tr>
                <tr>
                  <td>Dates of Travel</td>
                  <td>From:</td>
                  <td>
                    <div id="ddate" name="Departure Date" tabindex="5"></div>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td>To:</td>
                  <td>
                    <div id="rdate" name="Return Date" tabindex="6"></div>
                  </td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>Trip Purpose</td>
                  <td colspan="3"></td>
                  <td></td>
                  <td></td>
                </tr>


                <tr>
                  <td>&nbsp;</td>
                  <td colspan="2">&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>


              </table>

            </div>
          </div>


          <div class="tab">
            <input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2">Français</label>

            <div class="content">
              tab2
            </div>
          </div>


        </div>
      </div>
      <div style="border: 1px solid green; text-align: left;">
        <input type="button" value="Issue TAN" id="issue">
        <input type="button" value="Reset form" id="issue">
        <input type="button" value="Save changes" id="issue">
      </div>


    </div>
    <!-- end of div #wrapper -->
  </div>
  <!-- end of div #container -->
</div>
<!-- end of div #table-container -->

Answer 1

绝对定位的div不会影响容器div的大小，因为将position设置为absolute会将其从文档流中删除。它本质上与position设置为fixed时的行为相同，只是当您滚动时，它保持在页面中的同一位置。更多信息可以在这里和这里找到。

至于如何修复div的高度，简单的回答是，它不能用CSS完成，除非你为位置使用不同的值，也许在你的情况下是相对的，但这将取决于你的html的结构。这个问题涵盖了你可以用的其他一些方法。