Question

我有一种情况，我需要指定子宽度是父级的INNER宽度的100％，而不是外部宽度，这意味着父级水平滚动。

情况与此类似：

http://codepen.io/anon/pen/ygqPZG?editors=1100

HTML

<div id='parent'>
  <table id='child1'>
    <colgroup>
      <col width='400px'></col>
    </colgroup>
    <tbody>
      <tr>
        <td>Child1withareallyreallylongtitle</td>
      </tr>
    </tbody>
  </table>
  <div id='child2'>
    <p>Child 2</p>
  </div>
</div>

CSS

#parent {
  margin: 16px;
  border: 1px solid black;
  box-sizing: border-box;
  overflow-x: auto;
}

#child1 {
  width: 100%;
  border: 1px solid red;
}

#child2 {
  width: 100%;
  border: 1px solid blue;
}

当你缩小屏幕足够小以至于桌子（chld 1）停止收缩并且它迫使父母溢出并因此显示滚动条时，第二个孩子仍然保留父母的OUTER宽度的100％，我想它是父级的INNER宽度的100％，因此它与第一个子级（表）的宽度相同。

我希望尽可能保持答案纯粹的CSS，只要它不依赖于窗口大小调整事件，JavaScript就可以了，因为#parent可能因其他原因（水平兄弟增长）而缩小。

Answer 1

你必须将长标题保持为一行吗？如果没有，你可以尝试这个代码;

＆＃13;

//firebase - start
compile "com.google.firebase:firebase-auth:$rootProject.ext.playServicesVersion"
compile "com.google.android.gms:play-services-auth:$rootProject.ext.playServicesVersion"
compile "com.google.firebase:firebase-database:$rootProject.ext.playServicesVersion"
compile "com.google.firebase:firebase-messaging:$rootProject.ext.playServicesVersion"
compile "com.google.firebase:firebase-config:$rootProject.ext.playServicesVersion"
compile "com.google.firebase:firebase-analytics:$rootProject.ext.playServicesVersion"
compile "com.google.android.gms:play-services-ads:$rootProject.ext.playServicesVersion"
compile "com.google.firebase:firebase-crash:$rootProject.ext.playServicesVersion"
compile "com.firebase:firebase-client-android:$rootProject.ext.firebaseClientVersion"
compile "com.google.firebase:firebase-appindexing:$rootProject.ext.playServicesVersion"
//firebase - end

＆＃13;

    #parent {
      margin: 16px;
      border: 1px solid black;
      box-sizing: border-box;
       box-sizing: border-box;
    }

    #child1 {
      width: 100%;
      border:1px solid red;
      box-sizing: border-box;
      white-space: pre-wrap;
      word-break: break-all;
      word-wrap: break-word;
    }

    #child2 {
      border:1px solid blue;
      box-sizing: border-box;
    }

＆＃13;

Answer 2

我花了很长时间才明白你的目标，但我想我现在明白了。当child1表导致出现水平滚动时，您只希望child2 div跨越父元素的整个宽度。

This guy很好地解释了这个问题。在阅读之后，我可以看到你想要实现的目标是不可能使用HTML结构而不使用JS。他解释说，您可以通过将inline-block应用于父级并应用最小宽度100％来实现，但这仅适用于主浏览器窗口水平滚动。

如果您愿意更改HTML，这是一个显示表解决方案。

#parent {
  overflow-x:auto;
  border: 1px solid black;
  /* margin for display purposes in full screen snippet viewer */
  margin-top:80px;
}
.table {
  display:table;  
  width:100%;
}
.table-row {
  display:table-row;
}
.table-cell {
  display:table-cell;
}
.child1 {
  border: 1px solid red;
}
.child2 {
  border: 1px solid blue;
}

<div id="parent"> 
  <div class="table">
    <div class="table-row">
      <div class="table-cell child1">
        I live in Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.
      </div>
    </div>
    <div class="table-row">
      <div class="table-cell child2">
        Child 2
      </div>
    </div>
  </div>
</div>

Answer 3

将box-sizing: border-box;规则添加到#child2：

＆＃13;

body {
  padding: 0.1px;
}

#parent {
  margin: 16px;
  border: 1px solid black;
  box-sizing: border-box;
  overflow-x: auto;
}

#child1 {
  width: 100%;
  border: 1px solid red;
}

#child2 {
  width: 100%;
  border: 1px solid blue;
  box-sizing: border-box;
}

＆＃13;

<div id='parent'>
  <table id='child1'>
    <colgroup>
      <col width='400px'></col>
    </colgroup>
    <tbody>
      <tr>
        <td>Child1withareallyreallylongtitle</td>
      </tr>
    </tbody>
  </table>
  <div id='child2'>
    <p>Child 2</p>
  </div>
</div>

＆＃13;

关于border-box，请在此处查看：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing。

Answer 4

border属性会增加元素宽度，因为它会添加到除td元素之外的外部空间。

你的孩子2元素有边框属性，这就是你获得滚动条的原因

这stackoverflow link更好地解释了

道歉，我完全误解了这个问题。

您在寻找this output

吗？

<div id="top">
    <div id='parent'>
      <table  id='child1'>
        <colgroup>
          <col width='400px'></col>
        </colgroup>
          <tr>
            <td>Child1withareallyreallylongtitle</td>
          </tr>
      </table>
      <div id='child2'>
        <p>Child 2</p>
      </div>
    </div>
</div>

CSS

#top{
  margin: 16px;
  border: 1px solid black;
  box-sizing: border-box;
  overflow-x: auto;
}

#parent {
    width : 100%;
    display :table;
}

#child1 {
  width: 100%;
  border: 1px solid red;
}

#child2 {
  width: 100%;
  border: 1px solid blue;
}

CSS子100％INNER宽度

4 个答案: