Question

这应该是这样的：http://puu.sh/mLqjo/85df693983.png

这样做的逻辑是让左边的红色元素拉伸以填充除了包含的内容之外的剩余空间，以及右边的灰色。我正在使用bootstrap，因此如果排除填充，则中心的元素占用1170px或1140px。我尝试的是在儿童之前和之后添加第一个和最后一个元素，并使用绝对定位试图将它们一直拉伸到屏幕的边缘。但是没有可靠的计算长度的方法，我不能使用溢出因为主元素包含下拉列表。怎么办？

这是我的HTML：

<div class="body-width-container">
  <div class="container">
    <div class="battery-finder battery-finder--inactive">
      <div class="battery-finder__label">
        Alege Bateria
      </div>

      <div class="battery-finder__icon">
        <i class="icon icon-battery"></i>
        <div class="battery-finder__icon::after"></div>
      </div>

      <div class="dropdown battery-finder__select battery-finder__select--fuel">
        <button class="dropdown-toggle" type="button" data-toggle="dropdown">
          Combustibil
                            <i class="icon icon-fuel"></i>
          <span class="battery-finder__select__arrows">
            <i class="fa fa-angle-up"></i>
            <i class="fa fa-angle-down"></i>
          </span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Test 1</a></li>
          <li><a href="#">Test 2</a></li>
          <li><a href="#">Test 3</a></li>
        </ul>
      </div>

      <div class="dropdown battery-finder__select battery-finder__select--manufacturer">
        <button class="dropdown-toggle" type="button" data-toggle="dropdown">
          Marca
                            <i class="icon icon-car-front"></i>
          <span class="battery-finder__select__arrows">
            <i class="fa fa-angle-up"></i>
            <i class="fa fa-angle-down"></i>
          </span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Test 1</a></li>
          <li><a href="#">Test 2</a></li>
          <li><a href="#">Test 3</a></li>
        </ul>
      </div>

      <div class="dropdown battery-finder__select battery-finder__select--model">
        <button class="dropdown-toggle" type="button" data-toggle="dropdown">
          Model
                            <i class="icon icon-car-side"></i>
          <span class="battery-finder__select__arrows">
            <i class="fa fa-angle-up"></i>
            <i class="fa fa-angle-down"></i>
          </span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Test 1</a></li>
          <li><a href="#">Test 2</a></li>
          <li><a href="#">Test 3</a></li>
        </ul>
      </div>

      <div class="dropdown battery-finder__select battery-finder__select--year">
        <button class="dropdown-toggle" type="button" data-toggle="dropdown">
          Anul
          <i class="icon icon-calendar"></i>
          <span class="battery-finder__select__arrows">
            <i class="fa fa-angle-up"></i>
            <i class="fa fa-angle-down"></i>
          </span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Test 1</a></li>
          <li><a href="#">Test 2</a></li>
          <li><a href="#">Test 3</a></li>
        </ul>
      </div>

      <button class="battery-finder__button">
        <i class="icon icon-magnifier"></i>
      </button>
    </div>
  </div>
</div>

和CSS：

.container .battery-finder__label:before{
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    left: -1000px;
    right: 100%;    
    background-color: inherit;
}

.container .battery-finder__button:before{
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: -1000px;
    left: 100%;    
    background-color: inherit;
}

.body-width-container {
    overflow: hidden;
}

Answer 1

可以使用表格：

<table style="width:100%; table-layout: fixed;">
  <tr>
    <td style="width: 50%; background-color: blue">&nbsp;</td>
    <td style="width: 1170px;">
      header
    </td>
    <td style="width: 50%; background-color: red">&nbsp;</td>
  </tr>

Answer 2

您可以通过创建固定的显示样式来完成此操作。

我目前已将.battery-finder__content设置为max-width:1170px，这样可以防止其增长超过1170像素，其他两项将填补其余部分。而容器也将等于100％;

将百分比最大宽度的宽度固定为宽度。

.body-width-container,
.container{
  width:100%
}
.battery-finder{
  width:100%;
  display:table;
  table-layout:fixed;
  height:50px;
 }
.battery-finder__label{
  background: #d00;
  display:table-cell;
}
.battery-finder__content{
  background: #888;
  display:table-cell;
  max-width:1170px;
}
.battery-finder__buttonWrap{
  background: #555;
  display:table-cell;
  border:none;
}

<div class="body-width-container">
  <div class="container">
    <div class="battery-finder battery-finder--inactive">
      <div class="battery-finder__label">
        Alege Bateria
      </div>

      <div class="battery-finder__content">
        STUFF GOES HERE
      </div>
      
      <div class="battery-finder__buttonWrap">
        <button class="battery-finder__button">
          <i class="icon icon-magnifier"></i>
        </button>
      </div>
    </div>
  </div>
</div>

Answer 3

伪元素是正确的方向。

本Stack Overflow Q & A

中讨论了基本技术

.body-width-container {
  overflow: hidden;
}
.container {
  width: 80%;
  margin: auto;
}
header {
  height: 75px;
  background: grey;
  position: relative;
}
header::before {
  content: '';
  position: absolute;
  width: 50vw;
  height: 100%;
  top: 0;
  right: 100%;
  background: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="body-width-container">

  <div class="container">
    <header></header>
  </div>
</div>

如何将侧面元素拉伸以填充容器外的剩余屏幕空间？

3 个答案: