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.
Related
I'm very confused over the CSS style height: 100% and page layouts overall.
I typically end up setting html, body, and basically every container to height: 100% because if I want to have let's say 4 elements that split the height evenly, I can set them to height: 25%. Otherwise they will just take up their internal heights and could look really silly. And without their parents set to 100%, well, it won't work at all.
So fine, I give every container height: 100%. But then this has a bad effect if I have another page that should be able to scroll because it has a lot of vertical content and no defined heights. Yes, it will still scroll, but the child element is now technically outside main containers as evident through dev tools.
I think Bootstrap used to set height to 100% for html and body, but they no longer do (maybe I am wrong). Is this a bad design practice overall? What should I do instead of I want some pages to essentially not scroll and some to scroll?
Hope it makes sense and that this fiddle helps explain what I mean.
https://jsfiddle.net/jpzeqs1c/
I'm not sure about where you got the idea that every css element needs a 100% height, and it does not need to be used on every single container. Each container is used for different purposes, therefore you need to add the appropriate height, whether that is in px, vh, percents, etc. You can search pixels, percents, and viewport heights to find out which one is most suitable for your div containers. 100% for html and body is fine though. Overflows can be handled with overflow-x and overflow-y, and if you want to be able to scroll through the content you can use something like
overflow-x:scroll;
It's important to understand that height does not limit the height of the element and if the content does not fit within the height, it will overflow. Handling that overflow is done with the overflow property which specifics what happens if content overflows an element box.
For example adding overflow: hidden to your class, will prevent your element from overflowing:
.h100 {
height: 100%;
overflow: hidden;
}
Adding overflow: auto on the other-hand will add a scroll bar to the overflow if clipped, which is the intended behavior a lot of times. Keep in mind that if you only want overflow on a certain axis you can use overflow-x or overflow-y.
To to answer your question and if it's a bad practice no it's not a bad practice and regarding how to cause some containers to scroll and some not, this is done with the overflow property.
More info and useful resources:
Overflow - https://www.w3schools.com/cssref/pr_pos_overflow.asp
Height - https://www.w3schools.com/cssref/pr_dim_height.asp
For design purpose, I need to change the background-color of a div when its child is bigger than it. The parent div has a fixed height:
height: calc(~'100% - 112px');
overflow-x: auto;
overflow-y: auto;
and the child has no height precised so it takes all the place it needs.
The children displays a grid, and when we reach the end of the grid the client believes there's still content that the site didn't load; we need to change the color so it's clear there no data anymore. Problem, the change of color is not nice looking when we do it even if there's not enough data.
As we use less, I was thinking about using a condition, where I could specify that if the height of the children is higher than the parent's height, the background-color is different. But it looks that what I want to do is not as easy as I thought.
Can I check if the overflow is shown to put my condition? Can I do that in pure CSS / Less or do I have to do it in js?
Thanks in advance for your answers :)
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.
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'm looking for a way to force floated or absolutely positioned elements to stay in the flow in css. I'm pretty much thinking css is stupid for not having something like flow:on flow:off to keep it in the flow or take it out.
The issue is that I want to have a div element with a variable height, I have a floated image on the left in the div, and I want the div to be at least the height of the picture. I also want it to be at least big enough to hold all the text that IS in the flow (this obviously isn't a problem).
I need the picture to be able to vary in size. I am currently using a jQuery solution, but its acting up. Since I don't feel like debugging, and I feel like there should be some kind of CSS solution, i'm asking.
Anyone know how I can do this?
I usually go with overflow: hidden or overflow: auto.
Instead of using a new element to clear the div at the end, you can add this onto the absolute div css;
overflow: auto;
Obviously IE likes to play differently so you need to supply a width to it too. I am assuming the absolute div has a set width... so you can just set it to that width.
.abs-div {
position: absolute;
overflow: auto;
width: 160px; /* Replace with your width */
}
A hack that may work in your situation is to add another element inside your div after the rest of the content that has the CSS clear property set to "both" (or left, since your image is on the left). eg:
<br style="clear: both" />
This will force the element below the floated elements, which will stretch the containing div.