Question

我有固定元素的问题，我不想相对于第二个父div设置她的宽度100％.container 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：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;
}

Answer 2

试试这个：

.fixed{
    position:fixed;
    left: 0;
    right: 0
    width:inherit;
    height:10px;
    background-color:blue;
}

为什么我无法设置固定宽度100％

2 个答案: