div.fixed 100％宽度仅与css

How can I have div.fixed at 100% of the width of its parent .content? ... knowing that all widths will be variable, even .content

如何将div.fixed作为其父.content宽度的100％？ ...知道所有宽度都是可变的，甚至是.content

more or less what I need is .content with position: relative; div.fixed with the position: absolute; and width: 100%; But fixed at the top if I have a vertical scroll

或多或少我需要的是。内容与位置：相对; div.fixed与position：absolute;宽度：100％;但如果我有垂直滚动，则固定在顶部

and if possible without using JavaScript, only with CSS.

如果可能的话，不使用JavaScript，只使用CSS。

I was trying several things but none works, thank you for your time and help

我尝试了几件事，但都没有，谢谢你的时间和帮助

.sidebar {
        float: left;
        background-color: red;
        padding: 20px;
        color: #fff;
    }
    .content {
        float: left;
        width: 40%;
        padding: 20px;
        background-color: #d5d2ca;
        min-height: 900px;
        box-sizing: border-box;
        position: relative;
    }
    .fixed {
        background-color: #aaffaa;
        padding: 20px;
        position: absolute;
        box-sizing: border-box;
        width: calc(100% - 40px);

    }
    .content p {
        margin-top: 100px;
    }

<div style="width: 90%; margin: 0 auto;">
<div class="sidebar">
    the sidebar is going to have variable width
</div>
<div class="content">
    <div class="fixed">
        Fixed
    </div>
    <p>content</p>
</div>
</div>

4 个解决方案

#1

100% of .content? That would be

100％的.content？那就是

width:calc(40% - 40px);

#2

change that line:

改变那一行：

<div style="width: 90%; margin: 0 auto;">

至

<div style="width: 100%; margin: 0 auto;">

also add to the class:

也添加到班级：

.fixed {
            width: 100%;
       }

and remove width:40%; from the .content

并删除宽度：40％;来自.content

#3

I am not sure if i understand the problem correctly, but if you want to make the fixed div to have 100% of its parent, then the following should work

我不确定我是否正确理解了问题，但是如果你想让固定的div拥有100％的父级，那么以下内容应该可行

.content {
    position: relative;
}

.fixed {
    width: 100%;
    position: absolute;
}

#4

For your question to be solved, must width of .content equal with width of .fixed so, use of:

对于你要解决的问题，.content的宽度必须等于宽度为.fixed所以，使用：

.fixed {
    width: inherit;
    //so .fixed get width 40%
}

But,

但，

.fixed have position:fixed, so 40% is relative to the screen's viewport,

.fixed有位置：固定，所以40％相对于屏幕的视口，

and

和

.content is 40% relative to his parent[div with width:90%,(90% relative to body)].

.content是相对于他父母的40％[div宽度：90％，（相对于身体90％）]。

in here ,we have to do something to measure both elements relative to one element.so,do this:

在这里，我们必须做一些事情来测量相对于一个元素的两个元素。所以，这样做：

html,body {
    width: 100%;
    margin:0;
}

<div style="width:100%; margin:5px 70px;">
 of 90% to 100%----^            ^---^-------optional

also, use margin-left:-20px for remove affect padding:20px in .content.

另外，使用margin-left：-20px删除影响填充：20px in .content。

.fixed {
    margin-left: -20px;
    //more code...
}

Nowو you have both elements have width:40% relative to same element.

现在و你有两个元素都有宽度：相对于同一元素40％。

Note, Get Full Page to better see result.

注意，获取整页以更好地查看结果。

* {
    box-sizing: border-box;
}

html,body {
    width: 100%;
    margin:0;
}

.sidebar {
    float: left;
    background-color: red;
    padding: 20px;
    color: #fff;
}

.content {
    float: left;
    width: 40%;
    padding: 20px;
    background-color: #d5d2ca;
    min-height: 900px;
    position: relative;
}

.fixed {
    background-color: #aaffaa;
    padding: 20px;
    margin-left: -20px;
    position: fixed;
    width: inherit;
}

.content p {
    margin-top: 100px;
}

<div style="width:100%; margin:5px 70px;">
    <div class="sidebar">
        the sidebar is going to have variable width
    </div>
    <div class="content">
        <div class="fixed">
            Fixed
        </div>
        <p>content</p>
    </div>
</div>

#1