html - 为什么我不能设置固定宽度 100%

Question

我有固定元素的问题，我不想将她的宽度设置为相对于第二个父 div .container 的 100% http://jsfiddle.net/q7wcam7x/2/

HTML

<div class="container">
    <div class="header">
        <div class="fixed">
            !
        </div>
    </div>
</div>

CSS

.container{
    width:300px;
    position:relative;
    margin:auto;

}
.header{
  position:relative;
    border:1px solid red;
    height:300px;
}
.fixed{
    position:fixed;
    width:inherit;
    height:10px;
    background-color:blue;
}

Answer 1

这对于 position:fixed 是不可能的，因为固定定位是相对于视口(viewport)(或“屏幕”)而言的。

然而，这可以通过 position:absolute 来完成，这会导致元素相对于最近的设置了 position 属性的父元素定位:

http://jsfiddle.net/q7wcam7x/6/

HTML:

<div class="container">
    <div class="header">
        <div class="fixed">
            dasdasdasdadddddddds
            dsa
            asdd
            asd
        </div>
    </div>
</div>

CSS:

.container{
    width:300px;
    position:relative;
    margin:auto;
}
.header{
    border:1px solid red;
    height:300px;
}
.fixed{
    position:absolute;
    width:100%;
    height:10px;
    background-color:blue;
}

如果以上不是您要找的，也许这会帮助您找到解决问题的方法:

http://jsfiddle.net/q7wcam7x/7/

HTML:

<div class="container">
    <div class="stickyHeader">THIS IS A HEADER</div>
    <div class="scrollableContent">SCROLLABLE CONTENT
        <br/>SCROLLABLE CONTENT
        <br/>SCROLLABLE CONTENT
        <br/>SCROLLABLE CONTENT
        <br/>SCROLLABLE CONTENT
        <br/>SCROLLABLE CONTENT
        <br/>SCROLLABLE CONTENT
        <br/>SCROLLABLE CONTENT
        <br/>SCROLLABLE CONTENT
        <br/>SCROLLABLE CONTENT
        <br/>SCROLLABLE CONTENT
        <br/>SCROLLABLE CONTENT
        <br/>
    </div>
</div>

CSS:

.container {
    width: 200px;
    height: 150px;
    overflow:hidden;
    border: gold solid 2px;
}
.stickyHeader {
    height: 20px;
    background: white;
}
.scrollableContent {
    height: 130px;
    overflow: auto;
}