CSS绝对元素的完整宽度

Question

我有一个带有下拉过滤器内容字段的表。下面的例子。我想要  下拉内容具有与表格完全相同的宽度。我怎样才能做到这一点？如果我将width:100%放在.dropdown-content类中，则宽度太大。

.dropdown {
  position: relative;
  display: block;
}

.dropdown-content {
  display: block;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 5px 8px 16px 5px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
  margin-top: -15px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<table style="width:100%">
  <div *ngIf="filtering" class="dropdown">
    <span></span>
    <div class="dropdown-content" flex layout="row" layout-wrap>
      <mat-form-field class="searchFields" flex>
        <input name="test" flex type="number" matInput [(ngModel)]="test" placeholder="test">
      </mat-form-field>
    </div>
  </div>
  <tr>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>

Answer 1

表格中的div不正确，但您仍然可以在表格中使用它...并且表格样式应为<table style="width:100%"> ...使用box-sizing: border-box（包括内容，填充和边框在宽度范围内）以解决100％的填充问题...

.dropdown {
  position: relative;
  display: block;
}

.dropdown-content {
  display: block;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 5px 8px 16px 5px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
  margin-top: -15px;
  width:100%;
  box-sizing: border-box;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<table style="width:100%">
  <div *ngIf="filtering" class="dropdown">
    <span></span>
    <div class="dropdown-content" flex layout="row" layout-wrap>
      <mat-form-field class="searchFields" flex>
        <input name="test" flex type="number" matInput [(ngModel)]="test" placeholder="test">
      </mat-form-field>
    </div>
  </div>
  <tr>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>

Answer 2

自动宽度内容

这就是我的做法

在下面的代码中，我添加了一个名为content的div，并将其宽度设置为auto。然后，使用CSS dropdown函数将100% - 32px的{​​{1}}设为padding。

  

calc;

但是，将width: calc(100% - 32px)与box-sizing: border-box;一起使用可能会更好。

我还添加了一些背景色，并使下拉菜单略微透明，以便您可以更好地看到它。

width: 100%;

    .content {
    display:inline-block;
    width:auto;
    background:#ddd;
    
    }
    .dropdown {
      position: relative;
      display: block;
    }
    
    .dropdown-content {
      display: block;
      position: absolute;
      background-color: rgba(249, 249, 249, 0.79);
      box-shadow: 5px 8px 16px 5px rgba(0, 0, 0, 0.2);
      padding: 12px 16px;
      z-index: 1;
      margin-top: -15px;
      width: calc(100% - 32px);
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }

Answer 3

在div中使用table是不好的做法。并且table的样式应为<table style="width:100%">

对于您的问题，这是因为您在dropdown-content中添加了填充，所以总宽度为：100％+ 32px（左右填充），因此 在box-sizing:border-box中添加dropdown-content（在宽度内包括内容，填充和边框），因此已解决了填充和100％宽度的问题。

此处是link，以供进一步说明：

.dropdown {
  position: relative;
  display: block;
}

.dropdown-content {
  display: block;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 5px 8px 16px 5px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
  margin-top: -15px;
  box-sizing: border-box; /* Add this*/
  width: 100%; /* Add this*/
}

.dropdown:hover .dropdown-content {
  display: block;
}

<table style="width:100%">
  <div *ngIf="filtering" class="dropdown">
    <span></span>
    <div class="dropdown-content" flex layout="row" layout-wrap>
      <mat-form-field class="searchFields" flex>
        <input name="test" flex type="number" matInput [(ngModel)]="test" placeholder="test">
      </mat-form-field>
    </div>
  </div>
  <tr>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>