I'm trying to stretch the div container to fit the whole window. However whenever I set the width and height to 100%, I still get vertical and horizontal scroll bars that barely scroll anything. Hiding it with:
overflow:hidden
hides it but then the border on the right and bottom are missing. I want the div to fit exactly as the size of the window.
http://jsfiddle.net/pqDQB/
What I tend to do in situations like this is tinker around with the unit I am using.
Step 1: Make sure your content doesn't have any padding or margin that causes your issue.
Step 2: I recommend setting your width to width: 100vw and height to height: 100vh. This stands for viewport width and viewport height and will expand your div to cover the whole screen when both are set to 100.
Related
I have experienced a frustrating and interesting problem.
The design I am working on is based around a 100% height layout.
A site page always has an image.
Which can only ever be 800px in height.
A max-height of 100% is set on this image.
The results in a site that works nicely on large monitors, but on smaller screens the images will adjust meaning the site always fits nicely.
-
Because the site uses a horizontal scroll, I am making use of a position: fixed, on the #footer nav, to position the navigation in the bottom right.
However, when the screen has a height greater than 800px, this footer #nav remains in the bottom right corner.
I am trying to find a solution that would allow this fixed element, to be fixed, relative to the height of the container div. Meaning the navigation is always 1em above the bottom of the site layout.
-
You can see the site here - http://eastat1003.dev.voodoobytes.net/artists/bukanova/art-direction/idol-magazine-the-selected-ones/
-
Edited 17th May 2012 - Site now live! http://www.eastatheart.com/
Ok, got what you are after, took me a few mins!
I haven't got time to check this now, but it should (hopefully) work.
Create a container element, set to position fixed. Position that to the top right of the screen. Set the width to 0 and height to 100%. Also set a min-height of 800px.
Now, put your nav in there set to position absolute. Then set that to bottom 1em right 0.
That should work, I think...
Hope that helps :)
I have the problem that a div is not scaling over the full page when the page is not fully seen, i.e. scroll bars appear at the bottom.
Scales fine:
Does not scale fine when seen part is too small:
How can this be fixed? Here's the fiddle: http://jsfiddle.net/gdztn/29/
Clarification: The inner div must always be 800 px wide while the outter div should scale over the whole width of the page. As you can see in the second image, the outter div does not reach the right end of the page when scrollbars appear.
Thanks!
the problem is that the #head width is 100% and the inner div has a fixed width. if you scale the page down, it's still 100% but smaller than the inner div. it's like having a smaller container and an exceedingly bigger content which overflows.
to address this problem, you should set min-width of the #head to keep it from shrinking smaller than the inner div, like min-width: 850px
http://jsfiddle.net/gdztn/43/
EDIT: also remove position:absolute from #head. if actually needed to be absolute, then add width:100%
How does the line-height property in CSS works? If i set the line-height equal or less than the font size, it creates the problem with layout width. Please check this jsFiddle to see the problem.
I'm using font-size 14px, and line height 14px. If you change the line-height to 15px or more, the problem will be solved. Shouldn't the line-height only change the height, not disturb the width?
Please see the image below, as you see the #wrap has width of 300px, now because of line height the two div's of width 150px are not fitting into it.
I have checked with firefox and chrome, latest versions.
Line height is an inherited property but its inheritance works in a complicated way as compared to other inherited properties.
There is an excellent slideshow to Illustrate how line-height works depending on the units you specify the line height.
http://www.slideshare.net/maxdesign/line-height.
Slide 28 onwards explains your issue.
It has nothing to do with line height... not directly atleast. The two boxes will remain 150px wide regardless of whether you specify a line height or not. The overflow: auto causes a vertical scroll bar to appear (for reasons unknown to me) which reduces the available width of your container from 300px to ~280px hence the two colored boxes cannot appear side by side anymore. If you remove overflow: auto the result will appear as expected.
Edit
Revised demo here. To counter the vertical scrollbar, I added 1px padding on the container which seemed to counter the problem. For larger font sizes, use a padding of 2px.
In Chrome, if I increase the line height to 18px, the divs will be side by side, but the width doesn't change. Apparently this has something to do with the calculation of the height of #wrap. The browser cannot decide wether to show the scrollbar in #wrap or not. But since #wrap is exactly 300 wide, and thus can hold the two divs side by side only when the scrollbar isn't displayed, you'll have to force to hide it. Change #wrap overflow to hidden, or remove this property altogether.
I have created fiddle here: http://jsfiddle.net/ozzy/WEGMh/
How it should look is here:
Issue is the left and right hand divs arent showing. I have tried z-index , but it must be something painfully obvious.
My code may be crap too..
The idea is the container height will be flexible. Container width fixed.
Header fixed width and height
left div will be fixed width and flexible height.
right div can just adopt left divs parameters.
footer div fixed width and height.
If that makes sense.
The left and right divs are showing, it's just that their height is zero.
They get their height from their content, and as there is nothing in them, the height becomes zero.
The default for a div is to fill up the available width, but not to fill up the available height.
I'm trying to make a fixed width, fixed height box that "mimics" overflow:scroll, but the scroll bar is actually the widow scrollbar (or a pseudo-window scrollbar). What I mean by that is, the box is sitting there and you have the scroll bar on the side of the browser scroll the box contents up and down. Possible with just css? If not, is there a solution with javascript?
Your box height is exceeding your window height. In following manner this could happen if you are in resolution 1024 by 768px
div style="width:400px; height:1000px; overflow:scroll;"
Solutions-
css- reduce height of the box
or
js- control height of the box [screen.Height] for different
resolutions