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
Related
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 :)
Ok this has me completely stumped, have been trying to fix for days with no avail.
I have used cbpFWTabs.js to split my content.
It however seems to behave very odd in that it ignores my height parameters and will set the div to the content size.
Only way to stop this is to set a fixed height, but i would like the div to dynamically resize to fill the rest of the screen and display scroll bars if it exceeds the content-wrap div (keeping the menubar fixed).
I've checked all parents, it just doesn't seem respond to anything i try :(
Example here:
http://numerco.com/wp-content/uploads/NUA/scratch.html
I'm sure its somthing trivial i missed but its driving me insane.
Thanks !
Whenever you have height: 100% on an element, that means it will inherit the height of its parent.
Thus, the first thing you need to do is set height: 100% on the .container so that its height takes up the full height of the body.
Then, set height: 100% on the .container > section. Then, the children know to stretch to the correct height (which has been propagated down from body).
This should solve the question in your OP. However, it seems like there's still something fishy going on with your heights. Feel free to ask another question if you need to.
I'm trying to make my site responsive and I'm having trouble creating containers divs where their height responds to the content within them. I've tried setting height to 100% but it's not working for.
Most of the content blocks are flowing below each other as I resize my browser but the containers aren't expanding to fit around them.
HomePage
Does anyone know do I have anything fundamentaly wrong in how the page is built that is preventing me from acheiving this?
Cheers.
You need to clear your floats. One example is .mission-statement. When you have multiple divs floating inside a div, the container collapses on itself. In your case, it's only partially collapsing because you have a min-height set.
You do this easily by doing something like this:
.mission-statement:after {
clear: both;
display: table;
content: '';
}
To affect all divs you can change .mission-statement:after to div:after
Images will automatically have a height of 100% of the image relative to the width and the percent tag is percent of the browser window. What you may want is a width tag that might be max-width=*px and let the height be determined by the image itself.
Instead of letting me write you an answer I will refer to a really good thread about this. The solution anyway is something called clearfix.
css - What is clearfix?
I have created a page that has a min-height of 100% with a footer, as outlined http://peterned.home.xs4all.nl/examples/csslayout1.html
It works for the page-filling div, but I would like to have elements inside it which also take up all the height available to them.
Attempts:
Adding height: 100% to them does not work. They will use the parent's height but there are other elements and padding etc so that's the wrong height.
Making them absolute and set top: 0px; bottom: 0px;. This will make the div fill up the entire height, but if content is added the div doesn't get higher.
If this explanation is unclear, I have an example here: http://markv.nl/stack/quine.php
So the parent dictates a minimum height, as does the content. The highest of them should be selected. I've found this a formidable challenge; is it possible without javascript?
Thanks in advance!
It is possible without javascript. But you should not use absolute positioning with this problem. Use this solution to have footer stick to the bottom of the page. And make content div min-height: 100%. With more content it expand and push the footer down and with little content footer will be at the bottom of the page and content div will be pushed up to the footer.
After a lot of fiddling, I am quite confident that what I want to do is impossible. Correct me if I'm wrong.
In my case, it turned out a fix was possible. I used the position: absolute to create the background pattern. Above that, I added the content in a width:100% div to make the page scale.
It'll only work for some applications, but I think a general solution is not possible.
my page does not want to grow by its content.
please see my fiddle http://jsfiddle.net/msas3/ .
the lightBlue area should set the height for the whole page.
Because your columns are floating, they don't expand the height of parent container and so the pageContainer doesn't fit the height of content.
This problem has been raised many times, here is one of them that do a good job of providing a solution and explaining it:
http://www.codeproject.com/KB/HTML/relatively_simple.aspx
To be honest I think using a table is the simpler solution, with it I can do less positioning and more actual work.
You're being too specific. Don't set height: 100% when you don't need to. It means 100% of the parent's height.
For a simple answer: http://jsfiddle.net/msas3/1/
I removed height, width and min-height on html, body and #pageContainer
(If there is a specific reason you need the height specified please explain that as there may be a solution for it instead.)