绝对定位 div 中的内容溢出

Question

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

此处提供的示例（作为图片）显示内容溢出蓝色边框 div。此框内的内容应正确定义 div 的高度否？如何补救才能使我的 'blue' 框适合其内容？

这是有问题的标记：

* {
  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

absolute-positioned div 不会影响容器 div 的大小，因为将 position 设置为 absolute 会将其从文档流中删除。它与 position 设置为 fixed 时的行为基本相同，只是它在您滚动时停留在页面中的相同位置。可以找到更多信息 here and here.

至于如何固定 div 的高度，简短的回答是 CSS 无法完成，除非您为 position 使用不同的值，在你的情况下可能是相对的，但这将取决于你的 html 的结构。 This question 介绍了您可以使用的其他一些方法。

绝对定位 div 中的内容溢出

Content in absolute positioned div is overflowing

html

css

css-position

overflow

absolute