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)
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;
}
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
http://jsfiddle.net/n8YsM/
How do I make the div id blue take up the remaining visible space after the container div. Also this div should have no content.
Change the css to:
#container{margin-left:auto;margin-right:auto;width:200px;}
html,body { height:100%; }
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
#blue{width:100%;background:blue;height:100%;}
You had to extend the height of the page too.
something like this? http://jsbin.com/uxeda4
Use this CSS:
/*add this:*/
html, body
{
height: 100%;
}
.clear
{clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0;
}
#blue
{width:100%;
background:blue;
/*and this*/height:100%;
}
Updated fiddle.
For the browser to detect that you want to expand the blue div 100%, you have to tell the HTML and the body of your page to be 100% as well, or the div has nothing to reference the percentage from.
Hope it helps you out.