HTML/CSS Heigth 100% and px - javascript

'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

Related

Fullscreen Div - Scrollable - Responsive - Crossbrowser - Bootstrap3

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%;
}

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%;

Fluid resizable image with infinite horizontal scroll (REV. 2)

I have coded a site with a simple horizontal "nowrap" css with img floated side by side. I have also hide the scrollbar away. The side scroll can be done by normal vertical mousewheel scrolling (see my project url
Because the images is all in big resolution of 1400x850px, i wanted to create a site that that will scale the images according to the browser size. Currently all the images are in max-width:100%, my aim is to scale them below that percentage when the browser is smaller.
I tried using max-width:100% with both width and height in auto. It not working.
I try using jquery fluid images script, they are not working as well due to "nowrap"
Below are the main code i am using:
#content {
width:5600px;
overflow-x: auto;
white-space: nowrap;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#portfolio img {
float:left;
display:inline;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
This is the link of my project: http://credencepartners.com/demo02/
This is the result i trying to produce (for example please see the comments): http://credencepartners.com/demo02/interface/scene01.jpg
Do i need to implement javascript on this or CSS is possible for this scenario?
UPDATES / 10th Aug 2012
Thanks to Corey for the heads up, i have updated my demo02 link. The problem now is just adding the texts below the images. I tried using a div class to combine the text and images together, the result causes the images to be be non-fluid again. Now i need help making a fluid and re-sizable div tag.
GOALS
Knowing that building a typical horizontal side scrolling website is quite straight forward. The main problem i have is only the fluid resizable images at the top. I am pretty new that fluid/responsive layout and hope the gurus here can enlighten me :)
Use this CSS:
body, html {
width:100%;
min-height:100%;
height:auto !important;
}
#content {
width:100%;
height:100%;
position:relative;
}
#portfolio {
width:100%;
height:100%;
position:relative;
}
#portfolio ul{
width:100%;
height:100%;
display:block;
white-space:nowrap;
overflow:auto;
list-style:none;
padding:0;
margin:0;
text-align:center; /*in case not enough images to create a scroll*/
}
#portfolio img{
width:auto;
height:100%;
display:inline-block;
position:relative;
}
And lay out your html like this:
<div id="content">
<div id="portfolio">
<ul>
<img src="src.jpg" />
<img src="src.jpg" />
<img src="src.jpg" />
</ul>
</div>
</div>
I tried a little and found out:
You need to remove the height and width-Tag from the images
You set the height of the "portfolio"-div to the window-height using jQuery/JavaScript
That must be all, hope I understood what you meant

How to centre and scale up/down image within a resizing DIV

I have a DIV that is changing size depending on the browser window. I have an image inside of it which in effect will essentially fill up the entire browser window, and I need it to resize without stretching out of proportion when the window gets too wide or too long.
Additionally I need to have the image centred so you see the 'sweet spot' of the image when it becomes too big for the browser window.
I've been searching for ages and trying many different things but I can't work it out for the life of me. Perhaps it could be solved with Javascript or jQuery?
This is the CSS I have so far of the DIV id and the IMAGE class:
#VisitUsSlides {
height:100%;
width:100%;
position:absolute;
top:0px;
left: 0px;
}
.resizingImage {
width:100%;
min-width:100px;
min-height:100%;
position:fixed;
top:0;
left:0;
}
It's scaling up and down but starts to 'squash' horizontally when the window gets to thin, and it isn't centering.
Give it a try
<html>
<head>
<style type="text/css">
div
{
width:100%;
height:100%;
background-image:url('sample.jpg');
background-repeat:no-repeat;
background-attachment:fixed;//**Edit: Add this and check**
background-size:cover; //Edit2: Add this and check
background-position:center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Hope this solves your problem.
assuming the div have an id named
imageholder
#imageholder{width:500px;height:500px;position:relative;}
#imageholder>img{width:90%;height:90%;position:absolute;z-index:10;top:5%;left:5%;}
hope that helps
also while re-sizing the div. set the image max-height and max-width to its original dimension.
img {
margin : 0 auto;
display:block;
}
give it a try.
position your div as you want.
Try this JavaScript:
http://jsfiddle.net/Teak/6yxcG/
I'm not sure it's what your looking for but it could be expanded/edited, to be better. I'm not completely certain about what it is your after.
Edit: Try this full page version: http://www.teaksoftware.com/html/
There's a CSS3 property but i'm not sure about the support it has.
.resizingImage {
height: 100%;
width: 100%;
object-fit: contain; /*OR*/
object-fit: fill; /*there's also an object-position property*/
}
This prevents the image from being stretched.
Given that it's only ONE line of CSS you can try it out.

Dead Centered Div

How is it possible to center a div both horizontally and vertically with respect to the screen, not the page. So that when the user scrolls down a long page, the div remains horizontally and vertically centered?
Here's a pure CSS solution, note the percentages and negative margins.
http://jsfiddle.net/R7Xy2/
div {
position: fixed;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
Here is your code
http://www.geekdaily.net/2007/07/04/javascript-cross-browser-window-size-and-centering/
just attach this event to window.onscroll. No need to use jQuery, try this
function addEvent(obj,ev,fn) {
if(obj.addEventListener) obj.addEventListener(ev,fn,false);
else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);
}
addEvent(window,"scroll",yourfunction);
good luck
You may also try the following:
HTML markup:
<div class="classname">text here</div>
CSS:
.classname {
position:absolute;
left:50%;
top:50%;
padding:10px;
border:1px solid #ccc;
}
The border and padding can be changed or removed on the basis of requirement. Also, make sure that the parent container must be positioned relatively, i.e. it should have position:relative.
CSS for the <div>:
position: absolute
left : (centerofpagepixel.x - (width of div /2));
top : (centerofpagepixel.y - (height of div/2));
Set the above using jQuery on the <div>.
You can calculate the centerofpagepixel.x and y using jQuery again. Probably get the width/height of the screen and divide them by 2.

Categories

Resources