I have a question regarding the absolute position div.
I have something like
<div id='body-container'>
<div id='content-wrapper'>
contents....
</div>
</div>
I need to make my body-wrapper with absolute position because of other issues.
my css
#body-container{
position: absolute;
right: 0;
left: 0;
height: 100%;
overflow-y: hidden;
}
I have encounter a problem. Inside my content-wrapper, I have dynamic contents that will be added inside. It will create a unwanted scrollbar and the div become scrollable in that div. Is there anyway to kill the scrolling behavior? Thanks so much.
Remove the height property from your #body-container, and it will fit the content's height. No scrollbar.
http://jsfiddle.net/QeFe5/
EDIT
If you need the wrapper to be full height, then don't forget to set the top: 0 property, so the body won't create a scroll:
#body-container{
position: absolute;
right: 0;
left: 0;
top: 0;
background: silver;
height: 100%;
overflow: hidden;
}
Updated: http://jsfiddle.net/QeFe5/1/
This might work...
#body-container{
position: relative;
}
#content-wrapper{
position: absolute;
right: 0;
left: 0;
height: 100px; /* Need to put an exact height */
overflow: hidden;
}
If you need the content-wrapper to extend the full page you can use top and bottom with absolute positioning and make sure that your body-container (and it's enclosing containers) have height 100%.
#body-container{
position: relative;
height: 100%;
}
#content-wrapper{
position: absolute;
top: 0;
bottom:0;
right: 0;
left: 0;
}
Related
I have a position: fixed element. It has some top and left properties but it was not visible in the screen. After some debugging I found that it was positioned way off than it should be. So I set top: 0 and left: 0 and now that element was where I wanted it to be (near middle bottom) instead of being in the top-left of the screen as it should be.
Why is this happening? One thing is that it's parent container also has position fixed. I'll have a snippet below
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
<div class="container">
<div class="child">Test</div>
</div>
The reason there is a fixed component inside another fixed is that one is container and the other is kind of a tooltip so it has to be that way.
left and top properties should have some units associated with it, e.g. pixels. Try the following:
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
Got the answer. It's a bug in chrome where a child with fixed position doesn't work if any parent has transform: translate css.
Duplicate of this question
I've got a fixed container which is vertically and horizontally centred on the page, and an element within that container. Ideally I would like to have this element positioned in the very top left of the window, however I'm struggling to make it work.
This JS Bin illustrates the problem.
https://jsbin.com/nodonatifo/edit?html,css,output
Initially I thought I would just be able to do something like this on the element.
#container {
width: 300px;
height: 400px;
background-color: #55ffdd;
/* Center on page */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#element-actual {
background-color: red;
width: 100px;
height: 100px;
position: fixed;
top: 0px;
left: 0px;
}
<div id="container">
<div id="element-actual"></div>
</div>
However that just fixes the element in the top left corner of the parent container, rather than the window.
Is this possible with my current styles?
#container {
width: 300px;
height: 400px;
position: fixed;
top: 50%;
left: 50%;
background-color: #55ffdd;
margin-top: -200px;
margin-left: -150px;
}
If you use translate property then its children div will place relatively to the parent div only even when it is position:fixed so you can use the above code to place #container in center and you red div will be placed relatively to the window not the parent div :)
As Gaurav Aggarwal already pointed out, the fixed element will still be relative to the parent's transformed positioning. If you want the container element to be dynamically positioned (even if it has unknown dimensions), then you could use the following approach and avoid using transform: translate(-50%, -50%) for vertical/horizontal centering.
This method essentially positions the container element to fill the height/width of the window element with top: 0/right: 0/bottom: 0/left: 0, and then centers it vertically/horizontally using margin: auto.
Example Here
#container {
width: 300px;
height: 400px;
position: fixed;
top: 0; right: 0;
bottom: 0; left: 0;
margin: auto;
background-color: #55ffdd;
}
#element-actual {
background-color: red;
width: 100px;
height: 100px;
position: fixed;
top: 0;
left: 0;
}
<div id="container">
<div id="element-actual"></div>
</div>
Easy, add this to the child:
position: sticky;
I want to be able to display a DIV in a fixed position and have its width fit to content but each time I add position: fixed;, the div gets computed to display: block; and the div becomes full length.
HTML:
<div class='veil'></div>
CSS:
.veil{
display: inline-block;
position: fixed;
top: 34%;
left: 0;
right: 0;
margin: 0 auto;
background-color: lavender;
}
each time I add position: fixed;, the div gets computed to display: block; and the div becomes full length.
It's not display: block, it's position: fixed makes div stretch relatively to browser window, and since you have left: 0 and right: 0 you observe this behavior that div takes all window width.
Depending on your HTML structure you can use position: absolute instead or as pointed in comments (thanks #Paulie_D) don't use right: 0.
Just add another container.
and split the contradiction in CSS between them.
HTML:
<div class='container'><div class='veil'></div></div>
CSS:
.container
{
position: fixed;
top: 34%;
left: 0;
right: 0;
}
.veil
{
display: inline-block;
margin: 0 auto;
background-color: lavender;
}
I'm trying to create a layout for my site for a chat app. It needs to look something like this:
The point is that I don't want to body to scroll at all, just the chat area. My markup is as follows:
<div class="container">
<div class="header"></div>
<div class="chat"></div>
<div class="footer"></div>
</div>
Can anyone help?
Using fixed positioning, you can do something like this in your CSS.
Let's say the chat section division has "chat" as its ID and that the header and footer have an height of 200px.
.container .header {
position: fixed;
top:0;
left:0;
right:0;
height: 200px;
}
.container .chat {
position: fixed;
left:0;
right:0;
top:200px;
bottom:200px;
/* For Scrollbars */
overflow: auto;
}
.container .footer {
position: fixed;
bottom:0;
left:0;
right:0;
height: 200px;
}
Suggestion: you should use a "header" tag and a "footer" tag instead of "div" tags affected by css classes. Also, you should consider using absolute positioning instead of fixed positioning if you wrap the header, chat and footer inside a wrapper div so that the positions are relative to the wrapper and not the document. If you do so, don't forget to add a "position: relative" to the wrapper div.
The easiest thing to do is position everything absolutely, and have your main content area have an
header {
position: absolute;
height: 50px;
top: 0;
left: 0;
right: 0;
}
footer {
position: absolute;
height: 50px;
bottom: 0;
left: 0;
right: 0;
}
#main {
overflow: auto;
position: absolute;
top: 50px
left: 0;
right: 0;
bottom: 50px;
}
Like this: http://jsfiddle.net/cM277/
I'm working on a lightbox. I need it to be dynamically sized based on its content. But I also need it to be centered in the screen. I'm trying something like this:
HTML:
<div class="lightbox-background">
<div class="lightbox">
LIGHTBOX CONTENT
</div>
</div>
CSS:
.lightbox-background {
background-color: rgba(0,0,0,0.9);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 50;
}
.lightbox {
background-color: white;
width: 780px;
z-index: 100;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: auto !important;
max-height: 90%;
}
I couldn't make it work. I'd like to avoid using JS, if possible. How can I do it?
You could work with vertical-align: middle as well as the :before selector on the parent container. Check out my fiddle:
http://jsfiddle.net/GA5K3/2/
The best way that I know to center vertically with CSS is to absolute position top 50% then set a top margin negitave half height of element.
Since you don't know the height you'll have to use JS.
Maybe someone has a better technique.