jsfiddle
How to make 2nd div streatch to all its vertical place. It has to 'take care' of bottom margin of div above him and bottom margin of all the page. How to make it fill all that place? There will be normal content inside it, I will make page that will be scrolling horizontally and I need it to fit in various user Y resolutions. Bottom margin will be constant. I would really like to avoid js in that.
http://jsfiddle.net/Jf5J8/2/
#rest {
background-color:blue;
height:100%;
position:relative;
top:0;left:0;
bottom:0;right:0;
}
html, body {
height:100%;
}
Your code
#rest {
background-color:blue;
height:100%;
position:relative;
top:0;
left:0;
bottom:0;
right:0;
height:auto;
}
contains two time height. Remove height:auto; in the end
Related
I'm trying to place a button on bottom right corner of a div which is scrollable.
Since it is a content editable div, when content in the div increases, scollbar appears and button gets hidden behind the scrollbar on IE.
How to fix this issue?
I made an example for you.
Wrap all in a container, and position the bottom in the wrapper
main{
width:500px;
height:300px;
position:relative;
}
div{
background:#fff;
width:500px;
height:300px;
overflow-y:auto;
padding:10px 20px
}
button{
position:absolute;
bottom:0;
right:0;
}
https://jsfiddle.net/8f0Loem5/
hope this helps
I am using this CSS:
html{
height:100%;
}
#Nav{
position:fixed;
top:0;
}
#Heading{
position:absolute;
top:0;
}
The problem is that when using the DIV #Heading in the HTML file, it will cause a scrollbar.
So is it impossible to use two DIVs with "fixed" positioning and top 0?
When I remove the second div (position:absolute) the scrollbar disappears.
Could you tell me how to code the CSS correctly?
Thanks a lot!
I've found hear a solution:
Make body have 100% of the browser height
html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }
The next problem is that I want to add a DIV with position: absolute to the bottom of the site, but this DIV is hanging in the middle of the page.
I have structure where in the text needs to flow within the div box in the body. but seems like i cant get it to work. Maybe i am doing something wrong with the position: tag?
Here is the fiddle: http://jsfiddle.net/Tf5Z8/
and this is what i was hoping to accomplish: http://oi58.tinypic.com/332njm9.jpg so that as text keeps getting added (less or more), it keeps the bottom intact and resizes the div accordingly. Right now i have the #bodyContainer set to height:300px;
#bodyContainer { width:1024px; height:300px; margin:auto; background-color:#f4f3e7; padding-top:20px; }
but i don't want to do this since there would be many pages with different text amount.
Thanks a million, Cheers.
Change the #bodyContainer height to auto. Like this: JSFiddle
All you have to do is add min-height. So replace height property with min-height. And you are done.
If you don't have any problems using absolute position try this method. Add relative position to #bodyContainer and absolute position to #sidebarLeft, then float:right sidebarRight. Check this fiddle
CSS changes
#bodyContainer {
width:1024px;
min-height:100px;
margin:auto;
background-color:#f4f3e7;
padding-top:20px;
position:relative;
overflow:hidden;
}
#sidebarLeft {
height:100%;
width:360px;
background-color:#FFF;
margin-left:30px;
margin-bottom:20px;
position:absolute;
top:20px;
left:0
}
#sidebarRight {
height:100%;
width:634px;
float:right;
}
I have left div fixed, and right div scrollable. I have applied height:100% on the right div,but it doesn't work, i made background of the div yellow,and when i scroll it disappears, like it doesn't extend like it should.
Here is my code:
#levi{
width:25%;
height:100%;
background-color:#f98765;
position:fixed;
left:0;
float:left;
}
#desni{
background-color:yellow;
left:25%;
height:100%;
position:absolute;
left:value;
float:left;
}
One method is to set the background color of your right column on the <body> tag. That way, the background color will appear to always cover then entire height of the scroll area.
This is commonly known as "faux columns".
body {
background-color:yellow;
margin:0;
}
#levi {
width:25%;
height:100%;
background-color:#f98765;
position:fixed;
}
#desni {
position:absolute;
left:25%;
}
Working Example (jsFiddle)
Updated Working Example (with OPs posted HTML structure)
I have a container: divA.
divB and divC are inside divA.
Both divB and divC are floated left, so they are side by side.
#divA
height:500px;
width:1000px;
#divB
width:200px;
height:100%;
float:left;
#divC
height:100%;
float:left;
width:????
I want divC to fill the remaining space of divA dynamically, i.e I need it to have a dynamic width. How can I do this?
P.S If I set its width to 100% it fills the entire divA. What I want is for it to fill the entire width of divA but minus divB.
Give overflow:hidden to your #divc .Write like this:
#divB{
width:200px;
height:100%;
float:left;
}
#divC{
height:100%;
overflow:hidden;
}
Check this http://jsfiddle.net/yY388/