I'm trying to use a div to repeat a background to 100% of the height of the content inside the wrapper.
I'm using overflow: hidden to do this, but this (unsurprisingly) cuts off content at a point dependent on the user's screen resolution.
Removing the overflow:hidden line means the background won't repeat at all and the #wrapper div doesn't assume the full height of the content.
You can see my code and a preview here - http://jsbin.com/ikuba4/2 - if anyone has any pointers that would be great!
EDIT: To clarify, the issue is that I need my #wrapper div (which contains the background image slice repeating vertically) should dynamically extend its height to the height of the #inner_wrapper div - removing overflow:hidden results in the #wrapper div not extending its height at all, while using overflow:hidden extends the height to a point but then content gets cut off.
On #wrapper:
Remove height: 100%.
Remove overflow: hidden.
On #inner_wrapper:
Remove height: 100%.
Add overflow: hidden.
Testing with Firefox/Firebug, those steps sort it out.
Here is a fixed jsBin which is doing the equivalent of those steps.
Edit:
As #Marnix pointed out in his answer, you should also remove height: 100% from #outer_container - I don't think there's any need for it to be there.
A little different which works as well:
#outer_container
remove height: 100%
#wrapper
remove height: 100%
#inner_wrapper
remove height:100%
add overflow:auto
Related
I have a container div (modal) that is set to position: fixed (absolute is not an option for my purpose). Inside of this container I have two columns. One of these columns contains tab buttons with below them some content or a form. This content (only the content, not the tabs) should be scrollable but I can't figure out how.
The height of the tabs can change so the solution can't contain a fixed height for the tab bar.
I've tried to make the whole column scrollable first by setting the column to position: relative, min-height: 100% and overflow-y: scroll but this first try didn't even work.
Codepen with basic setup
EDIT
Not a duplicate of How to make child div scrollable when it exceeds parent height?
I'm working inside a fixed container
I'm working with flexible heights
Trying to achieve a css only solution
This issue is occurring because you are not declaring "max-height" to container ".details-column".
Try below CSS :
.content{
max-height: 400px;
overflow-y: auto;
}
Note: You have to set fixed height or fixed max-height of the container otherwise container won't know when it has to scroll data.
Excerpt from W3School:
The overflow property only works for block elements with a specified
height.
but since you've flexible height element doesn't know when to overflow as it will just keep on growing.
you'll most likely have to define a height or max-height or even use JS to calculate height, other suggestion i can make is to play around with white-space property as well as calc() for height.
Edit:
Here is a very good source to help you understand overflows: https://www.brunildo.org/test/Overflowxy2.html
Good Luck.
By applying following css your div will be scrollable.
.content{
height: 80%;
overflow-y: auto;
}
this is because there is not much content to make it scroll.. put some content and try.. check below link
overflow-y: auto
add this to the modal class. thanks
https://codepen.io/Xenio/pen/mvbpJV99
First off, here is a JSFiddle that represents the issue.
I am trying to have a "container" id that is the size of the entire viewport. This is so all div items in #container fit inside the page without scrolling. I assumed thats what height: 100% in html, body, and #container would do.
It seems though, that the .thirdwidth elements height is that of the full viewport, and is not just expanding to the bottom of the #container div (if you inspect the element, it appears that the .thirdwitdh elements go outside the #container)
Does anybody know why this is happening? I would like to be able to have all Sections 0-3 fit on the page without scrolling.
To achieve 100% viewport height you can try 100vh, but why are you placing it's position to absolute.
body {
margin:0;
padding:0;
}
#container {
height: 100vh;
width: 100%;
position:relative;
overflow:hidden;
}
Thanks to #Abbr for this answer (thought I would post a standalone answer so it's not hidden within the comments)
Due to the fact that the gameinfo id is 20% of the parent div, setting the .thirdwidth columns to 100% height made the entire page 120%
Changing the height of the .thirdwidth in my CSS to 80% fixed it!
I have 2 section in my HTML document see Here, now when i reduce the window size to about 820px the 2ns section shrinks , Why does that happen?
see screenshot below:
now the second section has overflow:auto, if I remove that, everything works fine, Link HERE
But what is really causing the issue, the section element is definitely a block element, so why is it not taking 100% width? Can anybody explain?
You should delete section element's margin-top: -1px; style or set .intro-lpoo element's style: overflow: auto. The reason what I thought is here: BFC
Your floating elements on the top section cause the issue. If you use clearfixes , you will not have any problems!Also use the following property for responsive images.
img{
max-width:100%;
height:auto;
}
Ok, let's think about it.
You have intro-lpoo section with height: 100% and 2 divs into it with float. And 1 of this divs have height: 0 because in that you place absolute positioned img. The reason why your why-coworking not shrinks from the very beginning is height: 100% of intro-lpoo. But when you make your browser resolution smaller - height: 100% of intro-lpoo getting smaller, and because your right div (which contain absolute positioned img) have height: 0 and your left div ( intro-wrpr ) have float: left thats why why-coworking shrinks and fills available space next to intro-wrpr.
I hope to able to explain
I'll keep it brief. I'm trying to make a div element height 100%. All of the parent elements are set to 100% height, so that shouldn't be an issue. The original code is here: http://pastebin.com/THK13a2q
Here's a picture of the situation/problem. The dark grey background (id="content") is supposed to be 100% in height.
http://i.imgur.com/kOK9H.png
I think it has to do with the float on #rightfeed. You need to either set this to clear: both or add a div directly after it with clear: both applied.
If this doesn't work, please create a jsfiddle so we have something to play with.
Add to your css file
#content {
overflow: hidden;
}
as mikevoermans pointed out.
I'm having some trouble with my web page. A picture probably descibes it best so here it is:
http://a.imageshack.us/img837/8223/skjermbilde20100902kl18.png
The text at the bottom is supposed to be inside the white area. I want the white div to change in height depending on the content. I have a div that centers the white area in the middle:
#mainContainer {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 800px;
min-height: 700px;
height: 100%;
}
I have also set html and body to 100%. But the problem is that the div stays at 100%, no matter how much content there is. Now a really strange thing happens when I set height to auto:
http://a.imageshack.us/img837/8295/skjermbilde20100902kl18y.png
This is how it should look (and how it does look using height: 100%):
http://a.imageshack.us/img837/7112/skjermbilde20100902kl18b.png
The full page can be found here (click on "Om oss" to see the page with the misplaced text)
I would really appreciate it if someone could figure out what the problem is! :-)
(Hopefully the CSS and HTML is easy to understand)
Edit: I just noticed that it renders properly in Safari, but not in Firefox.
You have given html and body a height of 100%. (Many child divs also have height:100%.)
What this means is that they are 100% of the size of the viewport, not the content. IOW, they are limited by the height of the browser window, and any content that stretches below this will be outside of any backgrounds applied.
Edit: To further elaborate, you have set up the background images (drop shadows) on the left and right on empty divs that you tried to stretch using height:100%, but since they do not contain anything, they can only be the height of the parent elements, which are themselves the height of the veiwport. When you set the html and body (or any other intermediate element) to height:auto, these divs (mainContainer-middle-left and -right) collapse to the size of their content, which is nothing.
You should probably reconfigure the html so these elements are parents of the actual content and get rid of all "height:100%" statements. They don't mean what you think they mean!
Stian,
For the div #mainContainer, set the height to auto.
For the div #mainContainer-middle, set the height to 550px.
That should fix your layout issues.