代码之家 › 专栏 › 技术社区 › Roger Far

子容器与父容器宽度相同

calc overflow css html

Roger Far · 技术社区 · 8 年前

问题是,包含数据的行的跨度只有屏幕的宽度。

此外,如果检查标题行,则表明实际行不是容器的宽度。

.schedule-grid {
  width: 100%;
}

.schedule-grid .rows {
  width: calc(100% - 150px);
  overflow: auto;
  white-space: nowrap;
  margin-left: 150px;
}

.schedule-grid .rows .header-row {
  margin: 0;
  height: auto;
}

.schedule-grid .rows .header-row>div {
  width: 250px;
  display: inline-block;
  white-space: normal;
}

.schedule-grid .rows .fixed {
  width: 150px !important;
  position: absolute;
  left: 0px;
}

.schedule-grid .rows .row {
  margin: 0;
  background-color: red;
}

.schedule-grid .rows .row>div {
  font-size: 12px;
  padding: 5px;
  height: 25px;
  background-color: red;
}

<div class="schedule-grid">
  <div class="rows">
    <div class="header-row">
      <div class="fixed">Name / Date</div>
      <div>
        Fr 1 Sep
      </div>
      <div>
        Sa 2 Sep
      </div>
      <div>
        Su 3 Sep
      </div>
      <div>
        Mo 4 Sep
      </div>
      <div>
        Tu 5 Sep
      </div>
      <div>
        We 6 Sep
      </div>
      <div>
        Th 7 Sep
      </div>
      <div>
        Fr 8 Sep
      </div>
      <div>
        Sa 9 Sep
      </div>
      <div>
        Su 10 Sep
      </div>
    </div>
    <div class="row">
      <div class="fixed ">
        Name
      </div>
      <div>
        Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123
      </div>
    </div>
  </div>
</div>

1 回复 | 直到 8 年前

kukkuz 8 年前

如果您可以更改标记,那么为周围的 .rows .排 :

.schedule-grid > div {
  width: calc(100% - 150px);
  overflow: auto;
  white-space: nowrap;
  margin-left: 150px;
}

.排 你可以申请 display: inline-block

.schedule-grid .rows {
  display: inline-block;
}

请参阅下面的演示:

.schedule-grid {
  width: 100%;
}
/*
.schedule-grid .rows {
  width: calc(100% - 150px);
  overflow: auto;
  white-space: nowrap;
  margin-left: 150px;
}
*/
.schedule-grid > div {
  width: calc(100% - 150px);
  overflow: auto;
  white-space: nowrap;
  margin-left: 150px;
}
.schedule-grid .rows {
  display: inline-block;
}
.schedule-grid .rows .header-row {
  margin: 0;
  height: auto;
}
.schedule-grid .rows .header-row > div {
  width: 250px;
  display: inline-block;
  white-space: normal;
}
.schedule-grid .rows .fixed {
  width: 150px !important;
  position: absolute;
  left: 0px;
}
.schedule-grid .rows .row {
  margin: 0;
  background-color: red;
}
.schedule-grid .rows .row > div {
  font-size: 12px;
  padding: 5px;
  height: 25px;
  background-color: red;
}

<div class="schedule-grid">
  <div>
   <div class="rows">
      <div class="header-row">
         <div class="fixed">Name / Date</div>
         <div>
            Fr 1 Sep
         </div>
         <div>
            Sa 2 Sep
         </div>
         <div>
            Su 3 Sep
         </div>
         <div>
            Mo 4 Sep
         </div>
         <div>
            Tu 5 Sep
         </div>
         <div>
            We 6 Sep
         </div>
         <div>
            Th 7 Sep
         </div>
         <div>
            Fr 8 Sep
         </div>
         <div>
            Sa 9 Sep
         </div>
         <div>
            Su 10 Sep
         </div>
      </div>
      <div class="row">
         <div class="fixed ">
            Name
         </div>
         <div>
            Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123
         </div>
      </div>
   </div>
</div>
</div>