Not really sure how to go about this. Basically, my page has a header, nav, body and footer contained in a wrapper, all of which is contained within the body (of course). The wrapper is set to fill 60% of the screen and be centered. The header, nav and footer will always be the same height and simply fill the wrapper, width-wise.
The main section, however, has variable length content (paragraphs, images, articles, sections, etc). If I have a lot of content in the main section, the page fills up, stretches out and scrolls like normal. But if I have just a little bit of content in main, the page isn't long enough and the footer ends up about halfway up the screen (or however high it needs to be to follow after the tiny main).
What I want to do is ensure that the body and/or wrapper stretch to fill the height of the screen, even if the main section isn't necessarily long enough to force it to be that tall. I have tried making the body and wrapper height: 100% but the wrapper is still not extending. If I set the footer to position: fixed, the footer sizing freaks out and the wrapper borders do not extend down.
Given these problems, I think the best solution would be somehow increasing the main section's height so that it and the other elements always add up to a minimum of 100%, but I can't figure out how to do this. This has stumped me for a week, so any help would be greatly appreciated!
This may work. It just styles both your body tag, your wrapper, and your HTML to fill the height of it's container.
html, body, #wrapper {
height: 100%;
}
I don't think I can be more specific than that without a simplified version of your HTML / CSS.
--edit--
I forked your JSFiddle with a working example. All I did was add the above snippet into the CSS.
As Eclecticist already stated. You need to set your html and body to 100% height. That is necessary because the wrapper-element inherits the height of the parent. Therefor setting the wrapper to 100%-height will never get it bigger that it's parent.
In addition to Eclecticists answer I would recommend you to set the wrappers min-height to 100% so the content won't run out of the container as soon as it exceeds the window height:
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
}
Related
I'm using magnific popup to display hidden inline content on click. this content has images inside, which have different sizes. Some of those images wont fit vertically in the viewport. Magnific popup has an option to fit content vertically to the viewport verticalFit: true. But it seems that this option works for image galleries only and not for inline content.
Here is a
fiddle of that problem.
I need the entire popup to fit vertically in to the viewport, even if the image is bigger. there must be a max-width in pixels, but this is working so far.
There's a CSS in which max-height can be changed but I think magnific popup creates a lot container with heights which are depending on each other. Maybe I have overlooked something and its not a big thing. But now, after doing research and finding nothing, I am running out of ideas.
It appears that the container heights for the magnific popup are all just set in CSS, and they all appear to just be 100% as far as I can see – and more importantly, I don't see the JavaScript setting any inline heights or widths – so that makes your life easy.
We can just set the max-height on the image as you guessed, and have an automatic width. We can use vh (viewheight) units to set the maximum height of the image relative to the viewport height.
.image img {
display: block;
height: 100%;
width: auto;
max-height: calc(100vh - 66px);
}
The precise calc value of 66px in the calc expression comes from the height of the description div (.descr), plus 4 pixels top and bottom border on the description, plus 4 more pixels top and bottom border on the image's immediate parent div (.image). That's 50px for the description div + 16 total pixels of border width.
You can make that amount smaller if you want; I believe 100vh - 66px is as big as you can get without needing to scroll at all, at least with the styles given in your fiddle.
You may also want to add some styles to make sure the image is centered in the container in the case of real tall images like this example, but I'll leave that up to you.
Updated fiddle.
I have a function that renders the HTML code from a textarea into a div of a certain size. The size of this div is determined when the page loads and is generally about 45% the width of the browser. I would like to know if there is any way to constrain what is rendered to not go out of the bounds of this div, but to instead add scrollbars if the rendered content exceeds the boundaries.
Basically, I'd like this div to behave like a browser window would when you render an HTML web page. Here is the code I have that does the rendering:
$(document).ready(function(){
$("#showmeImg").click(function(){
$("#outputContainer").html($(myEditor.getValue()));
});
});
So when 'showmeImg' is clicked, the contents of 'myEditor' is rendered and place within the 'outputContainer' div tag. All I have for this div tag are basic styling like background color, width, and height.
You should be able to get that effect using CSS. If you are setting the width programatically (as your question seems to suggest), then all you would need to do is set the height and overflow styles to get the desired behavior. Something like this:
#outputContainer {
height: 300px;
overflow: auto;
}
If you want the scrollbars to always be there (regardless of whether or not scrolling is needed for the current content), use overflow: scroll;.
You should add the CSS Rule 'overflow:auto' to the containing div. If the content spills outside of the div, scroll bars will be added automatically.
Have you tried something like this?
#outputContainer {
ovwerflow-y: auto;
}
This will add a vertical scrollbar, when there is enough content inside your container.
There are many nice jQuery plugins for adding nicer scrollbars though :).
http://enscrollplugin.com/ for example.
One page website.
Header at the top with anchor links
To different divs (sections) on the page.
Say my screen resolution is 1280*800 and each div section is max 800 and the content on each div section is visible when my browser is maximum size. I forgot to mention that scrolling is disabled so the other divs are only visible (scrolled automatically) using the anchor links at the top. So heres the problem, when I resize my browser, say for example theres only 450px worth of height on my browser, I can only see that amount of content on the screen and cannot scroll until the bottom of the div, so it hits the bottom of my browser.
Another point to understand is that all the elements in the div itself are not overflowing the height of the div so a simple overflow does not work because the issue is to do with the size of the browsers' height.
In essence when the browser window is anything less than 800px, the div is then covered up at the bottom by the amount reduced by the browser. I want the whole div (NOT THE CONTENT INSIDE IT) to be pushed up (top position) as far as it needs to so that the bottom of the div i.e. 800th pixel touches the bottom of the browser.
Any solution?
You can listen to changes in the window size and adjust the size of your divs to it. This way the div will always have the size of the window, so if it gets too small its overflow will show.
$("div").css("height", $(window).height());
$(window).bind("resize",function() {
$("div").css("height", $(window).height());
});
Working example at jsFiddle. Remember to set the div's overflow to auto, so they will show when the screen gets too small.
Update: from what I could understand in your update, your requirements can be satisfied with simple CSS. Let the html, body overflow at will, but set the "container" div's overflow to hidden (so it will only scroll one page at a time) and its height to 800px. When the browser window is resized to less than 800 px, the body's scroll bars will appear, letting you scroll the container div up and down. Both the container and the contentes will remain the same size: 800px.
html,body {
overflow: auto;
}
.container, .contents {
height: 800px;
overflow: hidden;
}
Working example at jsFiddle. Is that what you need? If you literally want to push the container div up until its bottom is aligned to the window, try setting padding-top or margin-top instead of top (though in this case I don't know how the scrolling will work).
Use media queries:
#media screen and (max-height: 450px) {
body { overflow: auto; } /* Or change the height or whatever */
}
I think the best solution to set min-height of main wrap 800px, else you have to add overflow hidden for your main content. Scrolling can be triggered by setting main content top position, but it must be absolute or similar. You cat write a function witch helps you to move main content changing it's top position.
I have two layout elements lets say one is 33%, the other 66%. They both use 100% of my screen size (So it is dependent on browser window). The smaller element also has a min-size property, so it cant fall below 250px;
Now if the layout is at least 757px large (so the size where the min property doesn't apply) everything looks fine. If the layout falls below the 757px the second element starts to overflow since it still takes the 66%, so the sum of both layouts exceeds the 100%.
I made some graphics to show the behavior:
Layout 1000px not overflowing:
Layout 500px overflowing
Is there a solution to prevent the overflow (not overflow: hidden) so the second element takes only the remaining space when the first element reaches it's min width.
Also JavaScript shouldn't be used excessive!
Regards, Stefan
Sure, this is actually pretty easy and requires a very minimal amount of code:
HTML:
<div class="sidebar">
...
</div>
<div class="content">
...
</div>
CSS:
.sidebar{
float: left;
width: 33%;
}
.content {
overflow: hidden; /* Ensures that your content will not overlap the sidebar */
}
You can view the live demo here: http://jsfiddle.net/7A4Tj/
Edit:
If you're trying to achieve a site layout that has equal-height background images for the sidebar and content, all you need to do is wrap both those elements in a containing div and use the Faux Columns technique.
Try using the following for the second widget:
position: fixed;
right: 0;
Here´s my five cents
min-width on both divs
and a wrapper that also has min-width, plus both of the divs having percentage width
JS fiddle code
PS seems to be working fine in IE8
PPS Also do check out #media queries if you want to have conditional CSS rules on different window sizes, might be helpful. Will run on browsers supporting CSS3: CSS Media queries at CSS Tricks
I have a flex component like this:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
...
width="100%"
height="100%"
creationComplete="init()">
.......
<components:NavigationBar id="nagivationBar"
left="0" bottom="0" />
This is supposed to show at the bottom left of the screen considering that parent container fills the screen.
The behaviour I just described shows perfectly with Safari
with Chrome it shows correctly if the download bar beneath is not visible but as soon as the download bar has something it covers the bottom part of it.
and FireFox seems to always hide like 50 pixels or so from the bottom of the screen.
It seems like every browser renders the 100% height in its own way.
What is your recommended best way to overcome this? I can add a 100 pixel margin at the bottom but it's not something I want to do in this application.
Try something like this in the <head></head> section of the HTML page that loads your Flex Application:
<style type="text/css">
html, body{
width: 100%; /* make the body expand to fill the visible window */
height: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
overflow: hidden;
}
</style>
Not sure it will help in your case but it's easy to try.
You could wrap the output in a containing <div>, then using YUI's getClientRegion, and a resize event for good measure, set the containing div's CSS height property to the value which YUI has determined the available viewport vertical space.
Sorry the solution is an outside-of-Flex one, but it'll work.
Edit: I meant 'getViewportHeight()' not 'getClientRegion()', sorry, check out the APi docs though, there's plenty of goodies in there for this sort of stuff.
Flex is just a flash component in a web page. Its size depends of what is outside of flex. I don't think you'll get a proper answer unless you post HTML/JS code surrounding flex app.
PS. From my experience working with browser height may be very troublesome.
this normally happens when you have one or more positioning elements in a page. Check your code to see if you have used the position element anywhere else in your code, if so are they different, i.e one relative and the other absolute, if so this could be your problem, its reccomended that they are all the same, ie all relative