i try make 100% height page with flex.
Then few items , looks like all very good:
Then i add more items in list , div_content height out bottom browser and appearas page scroll
If i add overflow-y: scroll for item list its dont help ... how can fix this ?
SANDBOX:
https://liveweave.com/9bGsqj (press f5 after loading)
Most likely, you just need to change 100% to 100vh, and the issue will be solved, usually it's happening because of different parent height properties.
Also this problem widely explained here:
Why doesn't height: 100% work to expand divs to the screen height?
Also, try to think in relatedness way, I did not found something that really will help to understand, at least MDN explanation is not bad and with some examples
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Related
I'm using Bootstrap 4 and trying to set 3 columns on the page to have 100% height - to only have scrollbars on the columns and NOT on the page. I have tried h-100 on the row div as well as various custom css changes like setting the height and max-height to 100% on each of the columns and other solutions I found on Stack Overflow and other sites. No matter what I do, I just cannot get it working right. Would be grateful if somebody could help me out. Here is the site:
https://gordon-matt.github.io/Extenso/
To see what I am trying to do, go here:
https://gordon-matt.github.io/Extenso/#assembly/bde7b8d9-116a-4e39-939f-2acce6aba664
then click the first button on the left (the one that says "18 Classes"). You will see the middle column is a list group and will fill with items. The scrollbars will appear, but they extend longer than the page itself and now there's a scrollbar on the browser.. Instead, I don't want any scrollbars on the browser and ONLY a scrollbar on the columns. What can I do to fix this?
Use CSS Property
style="height:100vh"
You should use height: 100vh; style for your section that you want to be 100% height for every device.
I would suggest to not to use !important too often, it makes specificity unpredictable,
Here is my solution, just check following CSS IDs and classes:
#types {
overflow-y: auto !important;
height: 58vh;
}
.h-100 {
height: 73vh !important;
}
Please let me know if it works!!!
I have now searched for hours, but haven't found a solution yet. I hope anyone out there can help me :)
I searched and found the following script: http://jsfiddle.net/tcaVN/81/
This script is great but if the div#center isn't full of content, it looks like the following: jsfiddle.net/tcaVN/80/
I actually want to resize it to 100% height even if it isn't full of content. Is this possible and if yes: How?
I really don't get it.
Many thanks in advance!
Edit: Thank you all for your help!
With my own design it now looks like this: http://jsfiddle.net/tcaVN/102/
The problem is, that you now can scroll even if there is no content.
Edit2: I have found the issue! There was a padding too much in #content.
my answer is here..
http://jsfiddle.net/tcaVN/101/
edit:
http://jsfiddle.net/tcaVN/103/ ( this is with text which extends beyond body, just added to show that css changes works for both the cases.. )
what i did was added
height:100% to html,body and #bind
and added min-height:100% to #center
based on this
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
This should work.
The likely problem is that you assume that the body and html containers default to 100% width and 100% height. This is not the case. By default, the width is 100% but the height adjusts to the content inside the html/body containers.
Hopefully I understood your question.
this one will work, even if the content exceeds the div.
setting min-height: 100% instead of fixing height:100% ensures a flexible div.
I have a div which pops up into the middle of the screen and is populated with some arbitrary content. I need it to scroll if the content added doesn't fit within the space available.
The basic styling is left: 25%; width: 50%; max-height: 70%
If the screen is big enough it all works fine. In Firefox, if there's not enough space, it also works nicely, adding a vertical scrollbar to the division. But in IE, it adds an annoying and unrequired horizontal scrollbar, and I can't figure out a way to get rid of it.
You can see some screenshots of what I mean here:
http://dl.dropbox.com/u/15633144/popup.html
Sorry I can't post the actual HTML, which certainly doesn't make this any easier! But I'm hopeful this is a standard problem which people have worked around before.
The usual solution posted on here plenty of times is overflow-x / overflow-y. But in some cases the div contents do actually need to scroll horizontally, so I can't use this technique.
First IE don't support max-height CSS property.
And the horizontal scrollbar will show up if some elements inside your container have a width overflowing. You probably have some elements inside with a width:100%. As IE adds random borders/margins here and there, the width of inside elements become larger than its container.
try looking here
CSS div element - how to show horizontal scroll bars only?
I'm afraid that because you said that sometimes you need to scroll then you will need horizontal scrollbars. Which if you hid them by overflow-x: hidden; wouldn't allow you to scroll. You could work a jQuery If statement and say if window.width was more than the width of your content, show the scrollbar, if not, then hide it!
In my CSS file I use this:
html,body{height:100%;padding:0;margin:0;border:0;}
Which causes a vertical scrollbar to appear on IE8, Chrome 5 and Mozilla 3.6, all latest version.
Also, the document is empty, it only has the html, head and body tags so nothing is going out of screen to cause that.
Setting overflow:hidden; on the html element will completly stop scrolling on the page.
How can I make it go away please but also keep scrolling when content is higher than display height?
Thank you.
I need 100% height in a XHTML document so that I can have div elements with 100%.
Anyway, I found the answer:
This problem only occurs when the top most element has a top margin.
It seems that that top margin gets added to the 100% height making it higher and causing the scrollbar.
So either use padding-top to space the top most element or use a with no top margin between the tag and the next element with a top margin.
overflow:hidden should help and prevent the display of scroll bars (you'll likely lose ~1px of content due to rounding errors
There may be better ways but I simply default to 98% which seems to obviate scrollbars in all browsers.
you could also set the height using JavaScript but that feels a little hacky
I ran into this issue today and found the scroll bar wasn't caused by a top margin on the first element, but by having BOTH the html and body elements have a height of 100%.
So, using this CSS rule:
html,body { height: 100%; }
I get scroll bars. If I change that to this CSS rule:
html { height: 100%; }
I get no scroll bars.
Peace...
The vertical scrollbar is coming because of height:100%. You don't need that unless there is a reason for you to use that.
Why are you setting 100% height in body?
It will get this height by default.
It makes sense to set height in body only if you want to set a numeric height in px such as lets say 600px
i made myself a Speed Dial-like homepage with links I visit the most.
Now, i made it elastic, so when browser window is narrowed horizontally, the boxes getting narrower too.
What I want is that when browser window is narrowed vertically, that boxes get narrower again.
I tried with several percentage height rules but it didn't work, need help.
Here is the page I'm working on its one-file page so CSS is not separated.
http://www.purplerspace.com/dl/
You have to add the height percentages to almost all the divs if you want it to work. Add height: 100% to html, body then the wrappers and also the lis and yeah, the a style too.
Don't know if it's optimal but tables for this should work. Set the table height and width to 100%. And don't forget to set your html and wrapper tag to 100% in height.