CODEWITHSUNDEEP
htmlcss
ml92
ml92

Reputation: 451

Why I can't set width of fixed 100%

I have problem with fixed element, I wan't to set her width 100% relative to the second parent div .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;
}

Upvotes: 0

Views: 239

Answers (2)

user3632930
user3632930

Reputation: 311

try this:

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

Upvotes: 0

user3495690
user3495690

Reputation: 576

This isn't possible with position:fixed, because fixed positioning is relative to the viewport (or the "screen").

However, this could be done with position:absolute, which causes the element to position itself relative to the closest parent that has the position property set on it:

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;
}

If the above is not what you're looking for, maybe this will help you find a solution to your problem:

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;
}

Upvotes: 1

Related Questions