Fullscreen Div - Scrollable - Responsive - Crossbrowser - Bootstrap3 - javascript

I am looking for a way to create a div with height and width of the current browser window size.
This should work even if the window is re-sized.
The fullscreen div shall be followed by even more content.
I am using Bootstrap3 - But I am not sure if this changes anything.
It is pretty easy to get this working in Firefox/Chrome/IE
.fullscreen {
min-height: 100%;
min-height: 100vh;
height: 100%;
width: 100%;
width: 100vw;
height: 100vh;
}
This does not work on Safari.
So I came up with some js
$('.fullscreen').css({
width: $(window).width(),
height: $(window).height()
});
This works on all Browsers (At least all Browsers I've tested). Resizing the window does not work, as the width and height is fix. I could create a Listener that reacts on Window Size changes (I have not looked it up - but this should work).
I don't like the idea of using js to set css.
Isn't there a best practice? This should be possible using css only, shouldn't it? The solutions I've found on the web, were not satisfying.

Something like this?
You need to set the dimensions of both the viewport (html) and content (body) to 100%, then by giving a div a height and width of 100% it will be calculated relative to the viewport, giving the functionality you require (always filling it even on resize).
Feel free to ignore the huge parrot picture in the example, I added it because often in such layouts the first div includes a responsive image.
HTML
<div></div>
<div>More Content</div>
CSS
html, body {
height:100%;
width:100%;
position:relative;
margin:0;
padding:0;
}
div:first-of-type {
height:100%; /* <-- keep the div 100% of the viewport height */
width:100%; /* <-- keep the div 100% of the viewport width */
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
background-size:cover;
background-position:center center;
}
div:last-of-type {
background:green;
position:relative;
color:white;
height:100%;
}

Related

How to get background image cover with 100% height?

I'm using an image with a height of 5000px, and i want make it always appear 100% in width and height to cover the background, in mobile and desktop.
.main {
position: relative;
background: url('../images/background.png') no-repeat top center;
background-size: cover;
width: 100%;
}
This code does not work, it makes her not to appear. I always need to set a height, and the problem is that the mobile's height is different from the desktop.
So you could say.. 'you can set height: 100%'.. and I did .. but nothing happens, the image doesn't appear, only if i set with pxs.
UPDATE
I feel urged to update my answer since I apparently understood the question the wrong way. I'll leave the old version at the bottom since apparently a lot of people found it helpful even though it failed to answer the original question.
Since your background image is repeating itself, I'll assume you don't want the whole image, just whatever height you need. So, you need 2 things:
set a height on .main
get rid of background-size altogether
So, this should actually work for you:
.main {
position: relative;
background: url('../images/background.png') no-repeat top center;
width: 100%;
height: 100%;
}
If my assumption is correct, there's 1 more thing: you don't need a background over 5000px high to achieve your goal, just reduce it to 1px height (i.e. 1 line of your desired background) and change your css to:
.main {
position: relative;
background: url('../images/background.png') repeat-y top center;
background-size: cover;
width: 100%;
}
I hope this helps
OLD VERSION
Your .main has no height and height:100%; doesn't work because the elements containing it have no height themselves.
One possible solution would be to add this:
html, body, .main {
height:100%;
}
This might be exactly what you need, but you may also run into other problems with this solution. It all depends on what you're actually trying to achieve.
Other possible solutions:
Use viewport units
.main {
height:100vh;
}
Please be aware that some mobile devices interpret these differently from what you'd expect.
Add the background to the body itself
body {
background: url('../images/background.png') no-repeat top center;
background-size: cover;
}
As I wrote before: It's difficult to tell which solution is the best, it depends on your goal.
Have you tried adding this style?
html, body{ height: 100%;}
Then adding a height:100%; to your .main div
You are working with background-image... Keep in mind that the size of the rendered image has nothing to do with the image it self, but with the element created to contain it.
Now, if you want your image to appear at 100% height and width you can use the property background-size: contain, instead of cover.
This will tell the browser that your image should not be cropped (as long as you have a height set for the .main element).
It seems to me, that the kind of effect you want is easier done if you just use the <img> tag instead of css background.
I had a issue about flex box can`t fit the background height, and the code below suited for me. The rest background-size,repeat and position depends on yours.
html{
height:auto;
}
body{
display: flex;
flex-direction: column;
min-height: 100vh;
}

CSS - max-height doesn't work for printing image

I've created a web application where you can draw an image. When you print the the website, there should only be the image, and it should use as much space as possible on one page.
My problem: if the image is much higher than wide, it still uses the full width and the lower edge is cut off or is on a second page! Firefox also cuts off about 2% of the image at the right edge. How can I solve this problem using css? Or is this only possible with JavaScript?
#media print {
#content {
display:none;
}
#canvas {
position:absolute;
max-width:100%;
max-height:100%;
margin:0px;
}
}
Here's my JSFiddle: http://jsfiddle.net/Gh28n/6/
The trick is to set a fixed with so large it can fit any paper, and set the max-width to 100% so it will always be scaled down, and height to auto to maintain the aspect ratio, like so:
#canvas {
width: 9999em;
max-width: 100%;
max-height: 100%;
height: auto;
}
As for the clipping on the edge, removing the position: absolute fixed it.
edit: added max-height: 100%;

Resizing initial div load to fit to browser zoom?

So I am currently designing a website and one of things Im noticing is the div I have placed for the container doesnt exactly flow in the way I want it to when observed in different resolutions. Heres what I have in the CSS:
#container{
position: relative;
width: 100%;
height: 100%;
background-color: black;
}
#center{
background-image:url(http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png);
height:1080px;
width:1920px;
position:absolute;
top:50%;
left:50%;
margin-left: -960px;
margin-top: -540px;
overflow: hidden
}
And here is my HTML:
<div id="container">
<div id="center"></div>
</div>
I pretty much just want the center div to resize on initial load based on the level of zoom the browser is currently at and fit the edges of the div to that zoom while keeping the div's width and height proportions of 16:9. I would like to be able to apply the same scaling to everything that is nested within the div as well if this is possible. But I would like the user to be able to zoom in and out afterwards without the div resizing to fit the screen actively while he is zooming. Im mostly wanting this process without auto zooming the browser because I do not want to mess with the level of zoom the user has on other websites.
The paragraph explaining your goal is quite confusing. Can you explain what you're trying to do better?
#center{
transform:scale(1.5);
transform-origin: center center;
-webkit-transform:scale(1.5);
-webkit-transform-origin: center center;
}
This would scale your div, and all it's children, without changing it's aspect ratio.
Or maybe you could use an actual tag inside #center instead of a background-image. Then you could do this:
#center img{
width: 100%;
height: auto;
}
And this link is an indepth SO post on detecting cross-browser page zoom.

Scroll to bottom not working

Need help, why is my scrolltop not working on this sample
I dont know why..using the code everything works fine. But updating the css the scrolltop is not working.:( what should i do to fixed this? is the problem cause by my css style?
i used this but it won't scroll at the bottom of the div..
$(document).ready(function() {
alert('scroll must happen');
$('#message_container').scrollTop($('#message_container')[0].scrollHeight);
$('.topbox').html('just sample');
});
There is no visible scrolling happening because the element you're trying to scroll isn't overflowing; it's all displayed. The scrollbar is for the <body> element and not the <div> you're trying to scroll.
You can make it work if you give #message_container a height e.g.
#message_container {height:100px;}
Alternatively, use absolute positioning tricks, for example in this demo. (The initial "undoes" CSS, I used it to keep code short. See MDN)
#container, #head, #body, #foot{
position: absolute;
top:0;left:0;right:0;bottom:0;
}
#head {
bottom: initial;
height:50px;
}
/* position so it get's your desired size*/
#body {
top:50px;
bottom:50px;
overflow-y: scroll;
}
#foot {
top: initial;
height:50px;
}
You have to set 2 things:
Overflow for the div,
Some height, even percentage one (to make it more flexible).
If you don't set any height at all the div will expand and then there is nothing to scroll, in this case the only scroll bar you get is of the document itself (body).
I added a height and overflow property to your CSS and now it works as expected.
jsFiddle
CSS added:
#message_container {
overflow-y:auto;
overflow-x:hidden;
height:300px;
}

HTML/CSS Heigth 100% and px

'm building a site, and I have a top bar that sticks to the top of the screen, then below I have an Iframe and that's all. The problem is as follows, my top bar is 50px height, and i want the iFrame to be 100%-50px. Is there a way to do it in CSS? If not, how would you do it with javascript? (I don't know the functions to get the window size).
|-------------top bar-------------| 50px
|______________________| 100%-50px
\iframe
\iframe
\
\
\
\
there is not need for javascript.
make the iframe height 100%; and add a padding to the top to offset the top bar.
iframe{ padding-top:50px; height:100%;
box-sizing:border-box; moz-box-sizing:border-box }
the key attribute is box-sizing. making the element height 100% will do just as its suppose to do, but any other padding will just add to the size of the height or width depending on how you pad it. but if you make the box-sizing border-box, this will force the browser not to add to the height or width but instead take or subtract (i.e. '100%-50px') from the height or width.
so long story short, box-sizing is the missing feature in your css. NO NEED FOR JAVASCRIPT, that would just be overkill.
NOTE: this works for all browsers
Use this:-
#iframeid{
height: -moz-calc(100% - 50px);
height: -webkit-calc(100% - 50px);
height: calc(100% - 50px);
}
give your iframe in css a padding-top: 50px
like this
iframe {
padding-top:50px;
}
or you can give your iframe a class and define the padding-top: 50px; in there
There's a way!
Use this function in CSS: min-height: calc(100% - 50px);
The min-height here will do the trick. Without that min it will take that as a max-height and will not expands its height until its content reaches 100% - 50px.
Fiddle.
You can do this with box-sizing and padding
here is what i have come up with
<div id="top-bar"></div>
<iframe src="http://www.jsfiddle.net" frameborder="0"></iframe>
*{
box-sizing:border-box; // box sizing allows us to add 50px padding to the iframe
-webkit-box-sizing: border-box; // Without effecting the size
-moz-box-sizing: border-box;
margin:0;
}
#top-bar{
height:50px; // Height of top bar
position:fixed; // Fixed
background:skyblue;
top:0;
left:0;
right:0;
}
iframe{
padding-top:50px; // Height of top bar
height:100%;
width:100%;
margin:0;
}
body, html{
height:100%;
width:100%;
overflow:hidden; // There was like 10px of empty overflow at the bottom
// i will find out why
}
Demo
Give me a few mins and ill explain everything.
This is the only way i can think of that will work in IE8+
Otherwise it's javascript

Categories

Resources