CSS背景容器

Question

我们假设我有一个996px宽的包装，并且以页面为中心。

.container {
    margin-left: auto;
    margin-right: auto;
    width: 996px;
}

我现在有一些元素，如header，navi，.... 现在我想创建一个彩色的＆＃34;字段/横幅＆＃34;这是这个包装器的30%并且对齐（直到这里没有问题）

.field {
    background-color: #000;
    width:30%;
    height:125px;
    float:right;
}

这适用于我的样本。 （示例宽度调整宽度：http://jsfiddle.net/8Lvh20qs/）

现在我希望字段的背景一直持续到桌面的末尾（右），但文本只在容器内。我怎么能解决这个问题？

示例：

Answer 1

我建议使用position: absolute;添加另一个容器请注意添加的属性position: relative到.container否则此容器内的position: absolute将无效

<强> // EDITED

现在应该看起来像你的形象。 注意：你需要为我为Chrome以外的其他浏览器添加的 transform：translate 属性添加前缀。它将-50％的自身高度转换为 - 这导致容器始终在容器内居中。

＆＃13;

＆＃13;

.container {
    margin-left: auto;
    margin-right: auto;
    width: 316px;
    border: 1px solid black;
    height: 600px;
    position: relative;
}
.field {
    background-color: #000;
    color:#fff;
    width:30%;
    height:50px;
    padding-right: 100%;
    box-sizing: content-box;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 70%;
  
}
.placeholder {
    height:300px;
    width:100%;
    float:left;
}

＆＃13;

<div class="container">
    <div class="placeholder"></div>
    <div class="field">text inside container</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

注意此答案是在最新OP编辑之前发布的，它解决了下图中显示的问题

您将需要一个包装器，因此字段在内部包装器中，包装器一直延伸到桌面容器。否则，如果文字是单行，.field width:100%和text-align:right;将解决问题。

这是jsfiddle example（带包装）

的CSS：

.container {
    margin-left: auto;
    margin-right: auto;
    width: 316px;
    border: 1px solid black;
    height: 600px;
}
.wrapper{
    position:relative;
    width: 100%;
    background-color: #000;
    height:50px;
    float:left;
}

.field {
    position:relative;
    background-color: inherit;
    color:#fff;
    width:30%;
    height:100%;
    float:right;
}
.placeholder {
    height:300px;
    width:100%;
    float:left;
}

HTML：

<div class="container">
    <div class="placeholder"></div>
    <div class="wrapper">
    <div class="field">text inside container</div>
    </div>
</div>

Answer 3

如果您希望字段的背景一直持续到容器的末尾，则必须为.field和overflow:hidden分配高度100％.container（所以div不会从容器中出来。）

.container {
    margin-left: auto;
    margin-right: auto;
    width: 316px;
    border: 1px solid black;
    height: 600px;
    overflow:hidden;
}
.field {
    background-color: #000;
    color:#fff;
    width:30%;
    height:100%;
    float:right;
}
.placeholder {
    height:300px;
    width:100%;
    float:left;
}

<div class="container">
    <div class="placeholder"></div>
    <div class="field">text inside container</div>
</div>

Answer 4

当你使用浮动时，它会删除包含元素的项目。试试width: 30% margin-left: 70%。