Html 让块级元素填充100%宽度的溢出-x:滚动容器

我有一个特定宽度的容器元素，带有

overflow-x:auto

。在其中我有一个块级别的header元素（h1），作为一个块元素，它应该水平地填充容器。只要容器中没有其他元素溢出，就会创建一个水平滚动条。如果有溢出的元素，则header元素仅填充容器的非溢出水平空间，但不会出现在溢出空间中

Fiddle演示问题：

HTML:

---

如何使

填充容器的整个宽度？

按以下方式更改此CSS代码，然后检查并告知您是否需要此代码：

#one {
width: 100%;
overflow: auto;
border: solid 1px;
}

请参阅

使用HTML

标题
元素：

<div id="one">    

    <table>
        <caption>
            <h1>header</h1>
        </caption>
        <tr>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>
    </table>

</div>

H1
将继承其父元素的宽度，因为它是相对的，因此它将始终与您设置的
#one
的宽度相同

您可以做的是，使用
overflow:auto
将表包装到另一个
DIV
中，而不是一个
#具有
溢出：auto
。这样，
#one
保持固定的宽度，但表周围的包装允许内容水平滚动

jsiddle:
试试这个：

css

#one {
    width: 200px;
    overflow: auto;
    border: solid 1px;
}

#one h1 {
    font-size 1.1em;
    background-color: blue;
    display: inline-block;
    width: 100%;
    margin-top: 0;
    position:relative;
}

table td {
    border: solid 1px;
    padding: 20px;
}

h1:after {
     content:"";
     background: blue;
     position: absolute;
     top: 0;
     bottom: 0;
     width: 100%;
    left:100%
 }

对于这个特定的例子，一个便宜的方法是在
中设置
宽度：200%
#一个h1
，但我想你正在寻找一个更具适应性的解决方案。我不认为你可以不使用js，但如果它是一个表，你可以添加一个跨列的表头，并将h1添加到其中-这并不能真正解决问题。。。我认为这很具体，他想要一个非100%宽度的有溢出的div，并且在溢出的div中有一个全宽度元素。在这种情况下，我认为他应该使用完美的像素作为div的大小，对吗？这不起作用。如果
#one
中的内容宽度大于100%（页面或
#one
中的任何元素），则页眉仍然仅为100%，而不是全宽。您所做的是将h1移动到表中。最好在答案中这样说，因为这可能不是OP想要的解决方案。这是一个语义上更正确的答案，但正如TylerH所提到的，OP可能不想要表中的标题+1.anyway@user3657431这是一个有效的答案，是的，但它改变了OPs代码的标记，答案只说明了部分更改，如果OP不知道h1在表中移动，这可能会产生误导并导致错误。好的答案总是描述他们所做的一切。这就是原因。@TylerH如果
h1
应该是
表的标题（我猜是这样的），那么标记会有一些额外的语义值。不幸的是，容器div中除了表之外可能还有其他内容。
h1
是容器的标题，而不是表格。
<div id="one">    

    <table>
        <caption>
            <h1>header</h1>
        </caption>
        <tr>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>
    </table>

</div>

#one {
    width: 200px;
    overflow: auto;
    border: solid 1px;    
}

#one h1 {
    font-size 1.1em;
    background-color: blue;        
    margin-top: 0;
    text-align: left;
}

table td {
    border: solid 1px;
    padding: 20px;
}

#one {
    width: 200px;
    overflow: auto;
    border: solid 1px;
}

#one h1 {
    font-size 1.1em;
    background-color: blue;
    display: inline-block;
    width: 100%;
    margin-top: 0;
    position:relative;
}

table td {
    border: solid 1px;
    padding: 20px;
}

h1:after {
     content:"";
     background: blue;
     position: absolute;
     top: 0;
     bottom: 0;
     width: 100%;
    left:100%
 }