I am trying to put a position:fixed div inside an another div. I want a fixed div which has a width:100%; so it will be great for mobile and desktop at the same time.
Here is my JSfiddle
SF wants some code:
<div id="container">
<div id="item">This div is good div</div>
<div id="fixed">Right side of this div overflow its parent!!! </div>
</div>
An element with position: fixed; ignores the parent size because it is relative only to the viewport:
MDN:
Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.
You can:
Try giving it position: absolute; and set the container to position: relative;.
Use position: fixed; and set the size explicitly.
You can use the calc() method to adapt the viewport size. Just subtract right and left margin from the 100%:
Edit: I added a min-height to the body to see the "fixed-effect" on scrolling
body {
margin: 0;
min-height: 1000px;
}
#container {
margin: 10px;
background: black;
color: white;
}
#item {
height: 50px;
width: 100%;
}
#item {
background: blue;
}
#fixed {
height: 50px;
width: calc(100% - 20px);
background: green;
position: fixed;
}
<div id="container">
<div id="item">Normal div</div>
<div id="fixed">Fixed div</div>
</div>
Related
I have several divs, each a child of the previous. They're all positioned relative, so that I can offset the children relative to the parents. I want to have the right sides line up, but I can't figure out how. Doing width: 100% obviously doesn't work because it ignores that the divs are not at left: 0.
As you can see, the divs escape the viewport:
div {
position: relative;
width: 100%;
height: 250px;
left: 50px;
top: 50px;
}
#div1 {
background-color: #4286f4;
}
#div2 {
background-color: #3267bc;
}
#div3 {
background-color: #244a87;
}
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
Or if you prefer: JSFiddle
How can I position the right side of each div at some specific distance from the right side of the screen with only CSS?
This is the expected output (the black rectangle around the outside represents the edges of the screen):
You might consider using margin-left instead of left.
With the CSS box model default, "width and height properties include the content, but does not include the padding, border, or margin," (box-sizing).
Also, block-level elements take up "the full width available", so width:100% isn't necessary (Block-level elements).
body {
margin: 20px 60px 20px 20px;
}
div {
position: relative;
}
div div {
height: 80px;
margin-left: 40px;
top: 40px;
}
#div1 {
background-color: #4286f4;
}
#div2 {
background-color: #3267bc;
}
#div3 {
background-color: #244a87;
}
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
I have a div with unknown width and height, this div is one of the children of a bigger div.
#myDiv {
/* Blah blah blah */
}
#inner {
position: absolute;
width: 100%;
height: 100%;
}
<div id="myDiv">
<div id="inner"></div>
</div>
But the problem is that the #inner div doesn't fit properly, it's way bigger than its parent #myDiv while its width and height are set to 100%.
What am I doing wrong?
By making any element position: absolute; means: place me to the first parent that is position: relative; which is not always equal to its parent element.
And if there are other children you need to remember that one of them will be places "under" the element posiotionated absolutely.
Accepted answer didn't solve it for me. Parent element was already position: relative;.
This is what worked for me:
In the child element, instead of using height:100% use top:0; bottom:0; to fill up height, and left:0; right:0; to fill width up.
.child {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
One reason an absolutely-positioned child element can stick out from its relatively-positioned parent is if the parent has padding.
Take the following example:
.parent {
position: relative;
padding: 50px;
width: 250px;
height: 50px;
margin: auto;
background-color: blue;
}
.child {
position: absolute;
width: 100%;
height: 100%;
background-color: #ff000099;
}
<div class="parent">
<div class="child"></div>
</div>
As you can see, the actual width and height of the child is the same as the parent, however since the parent has padding-top and padding-left, the child's content is placed after the parent's padding. This makes the child stick out at the bottom and the right.
There are different ways to handle this, depending on the desired outcome.
If you want the child to perfectly cover the parent, either use bets's solution and set the top, right, bottom and left attributes on the child instead of the width and height, or just keep the width and height at 100% and set top and left to 0, like this:
.parent {
position: relative;
padding: 50px;
width: 250px;
height: 50px;
margin: auto;
background-color: blue;
}
.child {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #ff000044;
}
<div class="parent">
I am parent content
<div class="child">I am child content</div>
</div>
If you want the child to occupy all the space within the padding on the parent, you can use calc() to remove the parent's padding from the child div:
.parent {
position: relative;
padding: 50px;
width: 250px;
height: 50px;
margin: auto;
background-color: blue;
}
.child {
position: absolute;
width: calc(100% - 100px);
height: calc(100% - 100px);
background-color: #ff000099;
}
<div class="parent">
<div class="child"></div>
</div>
(Just remember to remove both the left and right padding from the child's width and the top and bottom from its height. That's why I am multiplying the padding by 2.)
Combining these, if you want the child to start after the top and left padding, but not stick out the right or bottom, only subtract the top and left paddings from the height and width of the child:
.parent {
position: relative;
padding: 50px;
width: 250px;
height: 50px;
margin: auto;
background-color: blue;
}
.child {
position: absolute;
width: calc(100% - 50px);
height: calc(100% - 50px);
background-color: #ff000099;
}
<div class="parent">
<div class="child"></div>
</div>
<div class="ui-datatable-scrollable-view" style="
width: 100%;
position: relative;
">
<div class="ui-widget-header ui-datatable-scrollable-header" style="position:fixed;top:50px">
</div>
</div>
I have a div element which is stick on the top of the page. I have given the css as
width: 100%;
position: fixed;
z-index: 2;
But it is not taking the width.
I tried several ways to do that.
I tried making the parent div as position:relative but that is not working;
I think my element is taking the width equal to the width of screen.I tried giving the fixed width to it to fit the required size. But on change of screeen size it won't work proper.
I want it to take the width of its parent.
I just tried using your css and it works for me
HTML
<div class="container"></div>
CSS
.container {
width: 100%;
height: 100px;
position: fixed;
z-index: 2;
background-color: black;
}
Check if your html and body elements have a width of 100%
Link to codepen: https://codepen.io/athapliyal/pen/VzqyBX
#test {
width: 100vw;
position: fixed;
z-index: 2;
height: 50px;
background-color: blue;
}
<div id="test">
If you provide the width as percentage it is relative to the parent of the div, so you could define the parent with a width of 100% to make it working. To provide you an example we would need more code.
So the other solution is by defining the width with 100vw.
1vw = 1% of viewport (window) width.
This way it will be relative to the viewport and doesn´t care about the parent.
For the height you can use: vh (Viewport height)
I believe that the width is in fact 100%, however since you did not set a height, it appears invisible.
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
width: 800px;
background-color: grey;
height: 600px;
}
.child {
position: fixed;
background-color: blue;
width: inherit; height: 100px;
}
I have this code to show absolute div into relative div.
html:
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="relative">
<div class="absolute">Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.</div>
</div>
</div>
<div class="col-md-12">
normal text added
</div>
</div>
</div>
</section>
css:
.relative {
position: relative;
height:auto;
background-color:#e1e1e1;
}
.absolute {
position: absolute;
bottom: 0;
left: 0;
background-color: white;
width: auto;
background-color:#f5f5f5;
margin:0 15px;
}
In reality when I set height:auto for relative div this div is not showing. If I set any height value ie: height:150px; relative div it works and shows true. How do I fix this problem ?
demo here
You can't do this with css, and need to set the height on your outer div with position:relative for your inner position:absolute to show.
This is because when you set a <div> to be position:absolute, the outer container no longer has the concept of its width and height and will not accommodate the space it takes up.
add overflow :hidden; min-height:100px;
.relative {
position: relative;
height:auto;
overflow :hidden;
min-height:100px;
background-color:#e1e1e1;
}
Here the trick
CSS
.relative {
position: relative;
overflow :hidden;
min-height:100px;
background-color:#e1e1e1;
}
.absolute {
position: absolute;
bottom: 0;
left: 0;
background-color: white;
width: auto;
background-color:#f5f5f5;
margin:0 15px;
overflow: auto;
height: 100px;
}
DEMO
Set the relative height and absolute height
I have a main div contains two divs (one for heading and other for content). the main div is placed at the bottom of the html page with absolute positioning. When I hide content div, it sill takes up space in the bottom of the page.
I need to show only the header div to do a jquery toggle..
<div class="tll">
<div class="tllH">
</div>
<div class="tllC">
</div>
</div>
<style>
.tll{
background: yellow;
height: 100px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.tllH{
background: green;
height: 20px;
width: 100%;
}
.tllC{
background: magenta;
height: 80px;
width: 100%;
display: none;
}
</style>
For .tll, you set a height of 100px.
.tllH is only 20px and coincidentally .tllC is 80px.
This is because the height of main container is fixed,The solution is present in this fiddle.
Setting .tll{height: auto} fixed the issue!