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.
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
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 a strange problem....
Div should expand to 100% of available space by default, but its not the case.
I don't understand what's going on, even if I put display:block it's behaving as automatic width (relative to content).
I appreciate any help.
Thanks in advance.
http://jsfiddle.net/T3arP/
The effect I need to achieve is let the box with green border absoluted or fixed to top of its container, so you can scroll keywords but title will remain there.
When you absolutely position something (that's using position: absolute or position: fixed) width: auto no longer expands it to the container's width. The rules from which the width is actually determined are complicated*. That's why many people consider it a good practice to set a specific width on those elements (absolutely positioned ones, that is).
*you can find out about those rules at http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width)
As has been said, once you absolutely position an element, it loses the parent's tag association in a sense. So you could do something like this maybe.
http://jsfiddle.net/T3arP/1/
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.)
I'm working on a website for a client, and I'm not excellent at css... still in the process of learning a lot about divs. I made a div that is supposed to stretch 100% of the page, and it works, unless a user is browsing from a lower resolution (1024 x 768 for example) and has to scroll horizontally, the div will then only extend to the original length of the browser window.
That coupled with the fact that my footer is behaving the same way, and is not sticking to the bottom of the page.
The code/website can be found at:
http://cliqthis.com/temp/roadhouse/index.php
Thank you for any assistance, or an explanation of why this is happening would be helpful as I am still in the process of learning.
You see the scrollbar for resolution 1024x768 because <div id='container'> has a width of 1064 pixels set on it. The parent div will have a minimum width of 1064 due to this.
Are we talking about the black bars not extending all the way to the right?
You need to make sure not only that those divs' widths are 100%, but that all their ancestors' widths are also 100%. With normal (static) positioning, the 100% width means 100% of the element's parent's width.
Using the Web Developer addon in Firefox, with Outline Current Element turned on should prove very helpful in determining which elements aren't as wide as they need to be. (Move your mouse around the page and it will outline the element you're over, and tell you the css selector path to it).
Also you might want to compare the structure to the original template you used. It seems odd to me that, for example, you have an empty div.#footer element, and then a table.foot element after it, rather than inside of it. Perhaps you accidentally broke something there?
Set up a minimum width for the div.
div.class { /* ... */ min-width: ___px !important; /* ... */ }