I am building a lightbox which contains an article and some nav buttons which are positioned relative to the article (see pic). The article can be a variable length/height, but no bigger than the parent - the content should scroll with overflow:auto.
I've tried to build this using max-height:100%, but as mentioned in this question- Child with max-height: 100% overflows parent , if the parent element doesn't have an explicit height set, max-height resolves to none, so overflow:auto doesn't trigger. However, setting a height on the parent means the buttons are no longer positioned relative to the dynamic article height.
You can see a demo of this here: https://jsbin.com/hepivelele/edit?html,css,js,output
Click 'run with JS' then click anywhere in the demo to add more content to the article so it's longer than the page. Giving #wrap height:100% shows the opposite problem mentioned above.
Is there a solution to this problem?
You may add max-height: 90vh; to article element. Than it starts working without any other changes to markup or style.
Check modified example: https://jsbin.com/kofepotiji/edit?css,output
Current browser support is rather good: http://caniuse.com/#search=vw
The only drawback is that on really small heights padding of #lightbox becomes bigger than 10vh. This may be fixed by changing padding from px to vw and vh, but it occurs if height of viewport is less than 600-700px.
Related
I have a parent element with a fixed height, with 2 child elements.
The first element is dynamic in height, according to its content (or collapsed nature).
I want the 2nd element to be as high as it can be, until reaching the end of the parent's height. The trick is, I want it to be scrolled if it has more content than its height.
Here is a Fiddle demonstrating this. Notice the 2nd section is cut - I'm trying to get it to scroll. Of course I can have overflow: auto, but I want only the child div to scroll, and not the entire parent.
I solved this with Javascript and it worked fine.
However, due to some glitches and animations, it didn't look all that smooth.
I tried searching for a CSS only solution, but nothing I did came close to solving this. Is there a way, or am I bound to dynamic calculations in JS ?
.parent {
max-height: 250px;
overflow: hidden;
}
Edit: Fiddle had incorrect link, fixed now.
I'm working on an interface that utilizes a list of items within a scrollable div, some of which utilize a rollover menu on hover that extends outside of the div. Disabled scripting compatibility is a priority for the site, so I'm trying to see if the interface can be done with only CSS before I start getting into other compromises.
I've got some examples below. The menu in question is on the right side with heading 'select projects'. The third list item from the top in each page contains a rollover menu.
In order to keep the rollovers positioned relative to the their parent when scroll position changes, I positioned the parent li's relative and the child ul's positioned absolute.
EXAMPLE 1
Of course, once overflow:auto is on and the scroll in place, the rollovers are cut off from displaying.
EXAMPLE 2
I tried removing the relative positioning of the parent li's, and retaining the absolute positioning of the rollovers to free them from the div, but then they do not position properly when scroll position is changed.
I can only post two links but if you want an illustration, it's here: eypaedesign.com/markets-rollover-issue-no-relative.htm
With the exception of changing the UI, is there a combination of properties I'm not seeing here that can be used to make this interface work on CSS? I could position the entire div as absolute, and add a large amount of left padding for the rollovers to appear in, but that seems pretty inelegant.
Thanks folks -
With only CSS, you are limited to only one or the other: overflow: auto or overflowing hover-menus. Using separate visible and auto properties for overflow-x and overflow-y doesn't work, so I think your best bet is to go with the padding solution you were considering.
With proper use of absolute positioning and z-index (in case you are concerned about padded menu container hit-blocking any elements under the padding), you should be able to do it without destroying the rest of your layout. You'll have to control the size of all child elements inside the scrollable container of course, so that they don't extend to the full width of their padded parent.
Adding these properties - with no other changes - seems to work on your site, so perhaps you can get away with it easily:
#project_menu {
padding-left: 300px;
margin-left: -300px;
}
.center {
position: relative;
z-index; 10;
}
if you put a height of 293px in your class nav it should be ok.
Or in you project_menu ID, As I can see that ID has a height of 218px and your UL is 293px.
By changing one of those 2 you should be ok. It depends on how you set it affect other element.
But using project_menu ID should be just good.
I have a header class which has a background and a header-center class which provides the nav content for the header. My problem is that if the window is smaller than the header-center width, the header background doesn't span the entire top when you scroll over. Stackoverflow seems to have the same problem, try resizing it and you'll see what I mean - they gray background doesn't expand over to the search box. How would I go about fixing this?
Thanks!
if the background is inside a container with a width of 100% and any parent container, including the <body> or <html> don't have a width set in the CSS then you will experience this behaviour. as 100% will be 100% of the browser viewport. Change this to a fixed width and it should stretch to fill the fixed width.
What you need to do is set a display: inline-block on your body tag. If you do this to stack-overflow's site. It fixes the problem.
This method is called "shrink-to-fit".
Here's a fiddle with the problem. DEMO
As you can see when you scroll the div doesn't expand the width of the whole screen anymore.
and here's a fiddle without the problem. DEMO
This has been answered similarly elsewhere by user473598 here How to make div not larger than its contents? you don't technically need the element to be a span though. buti-oxa's answer is worth noting as well as it notes that using this method is some what costly as it means formatting the element at least twice. Since it's being applied to the body it doesn't seem like that bad of a deal in your situation.
I have created a master page in asp.net which dont have any server side control as of now. I used div every where rather than table. There is not even a single Table right now in the page. Now When i tried to use that master page on other pages I found that div section that was holding the body content of the page is not expanding as the content is growing and content is overflowing on other sections.
Do we have any way to make div expandable with keeping minimum height fixed.
i.e. If the content is less than the minimum height set than regions should be shown with minimum height that was set else if content is more than minimum height then height starts growing with the page.
How can we do this.
This is my site where i want to make make about us and contact us page to be expandable.
You can find the css named style.css within the site.
By default a div will expand beyond the size specified using the min-height CSS property. My guess is that you are looking at the wrong thing as the cause of this issue. For your information IE6 I believe ignores the min-height property and will shrink to its content size even when the content size is smaller than the specified min-height.
UPDATE:
When you detect a browser with the problem mentioned above (i.e Internet Explorer 6) use JavaScript to measure the height of the wrapper DIV using it's offsetHeight and then subtract that value from what the min-height should be. If the value is positive then set the style.height value to the min height value.
Try this css:
div {
min-height: 100px;
overflow: hidden;
}
This overflow: hidden is a css-hack so to say. Maybe it helps you out here...
I have noticed that both IE6 and IE7 push the parent div down when an element inside has padding-bottom ... what is the best fix for this? Is it possible to fix this with valid css?
EDIT
The solution I used was to set overflow: auto in the child element (as mentioned below in the accepted answer). I went with this approach because my child element height was dynamic, and thus I couldn't set it.
padding-bottom is added to the child elements total height, so even if the child element is empty, padding-bottom:10px; will give it a total height of 10px. And in all modern browsers, the parent element will expand to give space to it's child(s).
But if you wish to have a set height on the parent, you could just set a height on the parent and control the child's content by overflow:auto/hidden/scroll..
Or you could set parent as position:relative; and set position:absolute; to the child element.
Kinda depends on exactly what you want..
Check your setting a doctype and not running into quirksmode, next use a reset stylesheet to make sure that all your elements start of on the same foot.
If your still getting additional padding in a certain version of IE, use a conditional comment to add an additional stylesheet for that browser.
I haven't seen IE8 or Firefox "push the parent down" when padding is applied to a child element; it's just that the parent element's height expands to accommodate the child. This is the correct automatic behaviour in CSS. I made a brief demo:
http://robertgrant.org/testbed/paddingbottom.xhtml
Feel free to try it in IE6/IE7 and see what happens (needs Javascript enabled to make the link work, but you can see what's going on even without that).
If you want to constrain the parent's height, then set it (e.g. height: 100px) and set its overflow property to hidden.