Struggling to figure this one out, any help is appreciated.
I've a main #wrapper div that wraps around the whole document. Then we have a #sidebar-wrapper for the navigation and a #page-content-wrapper for the content. The problem is that when the content expands the sidebar-wrapper doesn't. I know they are both absolutely positioned, I've tried relative positioning and that didn't work either.
The sidebar-wrapper div should expand down (height) to accompany the growth of the page-content-wrapper div.
I would appreciate any help. Thank you.
Here's the fiddle: wrapper fiddle
Found the SOLUTION: overflow-x on the page-content-wrapper should be set to hidden and that made the sidebar-wrapper expand to 100% of the document size.
Use position relative for outer wrapper like this:
#wrapper.toggled
{
padding-left: 250px;
overflow: hidden;
position:relative;
}
Related
I have a container div (modal) that is set to position: fixed (absolute is not an option for my purpose). Inside of this container I have two columns. One of these columns contains tab buttons with below them some content or a form. This content (only the content, not the tabs) should be scrollable but I can't figure out how.
The height of the tabs can change so the solution can't contain a fixed height for the tab bar.
I've tried to make the whole column scrollable first by setting the column to position: relative, min-height: 100% and overflow-y: scroll but this first try didn't even work.
Codepen with basic setup
EDIT
Not a duplicate of How to make child div scrollable when it exceeds parent height?
I'm working inside a fixed container
I'm working with flexible heights
Trying to achieve a css only solution
This issue is occurring because you are not declaring "max-height" to container ".details-column".
Try below CSS :
.content{
max-height: 400px;
overflow-y: auto;
}
Note: You have to set fixed height or fixed max-height of the container otherwise container won't know when it has to scroll data.
Excerpt from W3School:
The overflow property only works for block elements with a specified
height.
but since you've flexible height element doesn't know when to overflow as it will just keep on growing.
you'll most likely have to define a height or max-height or even use JS to calculate height, other suggestion i can make is to play around with white-space property as well as calc() for height.
Edit:
Here is a very good source to help you understand overflows: https://www.brunildo.org/test/Overflowxy2.html
Good Luck.
By applying following css your div will be scrollable.
.content{
height: 80%;
overflow-y: auto;
}
this is because there is not much content to make it scroll.. put some content and try.. check below link
overflow-y: auto
add this to the modal class. thanks
https://codepen.io/Xenio/pen/mvbpJV99
I'm trying to span a child div the full width of the page from within a fixed width container parent div. I've found a few posts on how to do this but nothing seems to work for me. This overflow in particular seems to make it work with position: absolute; and left:0; right: 0; however, my div disappears when i use absolute positioning. The div does span the full width when using position: fixed; but I dont want fixed positioning :(
I've tried numerous things now and I'm pulling my hair out with this seemingly easy task. Please see my link below where I am using fixed position on my lightgray div for the sake of the example - if you change to absolute position you will see the div disappears.
Here is my test link - http://www.daybreakutah.com/test-3/
All and any help is much appreciated!
Is this possible using CSS only? I can't find a definitive answer anywhere!
It's for a left and right nav bar I'd like to stretch to 100% height; i.e. the end of the page. There are three floated columns contained within a floated container that stretches 100% height, I just can't get the childs to stretch...
http://www.dev.inside-guides.co.uk/brentwood/pages/links.html
Thanks in advance for any replies.
It can be done, if you set its parent div container position to relative as follows
#container {
position: relative;
}
and then set the div you want to be 100% and position absolute as follows
#inner {
height: 100%;
position: absolute;
}
this is how I've done it, hopefully I haven't missed anything :)
I had this problem before.
Try adding:
html{
height:100%;
}
Make sure the parent div has a set height and the div itself is also height:100%;
If you have any trouble let me know :)
please see my fiddle: http://jsfiddle.net/qVHg8/1/
Why isn't the fixedRightCol being positioned at right:0 of the outer container div? Right now it's going outside of the container div which I don't want.
I could use position absolute, which puts the fixedRightCol in the right position but scrolls. I want the fixedRightCol to be fixed (no scroll).
so how can I get fixedRightCol position correctly and fixed on scroll?
Thanks
If you want the green div to be fixed inside the red div, you need to use position: absolute;
http://jsfiddle.net/qVHg8/2/
position: fixed; fixes the element to the viewport, rather than the parent.
EDIT:
If you're able to use a bit of javascript & jQuery, then this will work with your dynamic margins:
$(function(){
$('.fixedRightCol').css({right: $('.container').offset().left});
});
What thats doing is setting the right CSS property to be the calculated left property of the container. As the margins are the same on both side (auto), then this will shit the red div to the correct position.
http://jsfiddle.net/qVHg8/4/ is a working example of this.
When you give something a position fixed, it breaks out of any divs it may be in.
Edit:
You could just do this:
.fixedRightCol{
position: fixed;
margin-left: 350px;
width: 50px;
background: green;
}
Use margin-left: 350px; for green box with NO right: 0px; or anything...
i think you are meaning to use position:absolute;
I'm trying to use a div to repeat a background to 100% of the height of the content inside the wrapper.
I'm using overflow: hidden to do this, but this (unsurprisingly) cuts off content at a point dependent on the user's screen resolution.
Removing the overflow:hidden line means the background won't repeat at all and the #wrapper div doesn't assume the full height of the content.
You can see my code and a preview here - http://jsbin.com/ikuba4/2 - if anyone has any pointers that would be great!
EDIT: To clarify, the issue is that I need my #wrapper div (which contains the background image slice repeating vertically) should dynamically extend its height to the height of the #inner_wrapper div - removing overflow:hidden results in the #wrapper div not extending its height at all, while using overflow:hidden extends the height to a point but then content gets cut off.
On #wrapper:
Remove height: 100%.
Remove overflow: hidden.
On #inner_wrapper:
Remove height: 100%.
Add overflow: hidden.
Testing with Firefox/Firebug, those steps sort it out.
Here is a fixed jsBin which is doing the equivalent of those steps.
Edit:
As #Marnix pointed out in his answer, you should also remove height: 100% from #outer_container - I don't think there's any need for it to be there.
A little different which works as well:
#outer_container
remove height: 100%
#wrapper
remove height: 100%
#inner_wrapper
remove height:100%
add overflow:auto