I have an iFrame that loads flash content. I want this content to take up whatever portion of the screen is left. So the frame has a height of 100%, but I noticed the bottom gets cut off a little bit, causing the some of the flash content to be cut off. How can I write some CSS to sort of calculate what 100% of the rest of the page is (I have some bootstrap buttons at the top of this interface that take up some space).
If you are using CSS3, you can use the calc function like this:
height: calc(100% - 30px);
Or whatever the height of you button bar.
Try positioning your flash box as absolute, don't set its width and height explicitly in CSS and just set the offset left, top, right, bottom like this:
div {
background:green;
position:absolute;
bottom:10px;
top:30px;
left:100px;
right:100px;
}
Fiddle
Related
In this fiddle I want to create a footer that stays at the bottom of the page, as in this screenshot:
However, when the browser window is minimized so that the viewport is less than the content area, and the page is scrollable, the footer stays in the middle of the page rather than below the content. Once a user scrolls, the footer stays in the middle of the content boxes, like in this screenshot:
How do I create a footer that stays at the bottom of the viewport when there is no scrollbar, but then stays at the bottom of the content boxes when a scrollbar appears and content is outside the viewport?
I am using position:absolute; bottom:0; on the footer. Do I need to add declarations to my content box, or to the footer? Thanks for your help!
There are a lot of attempts to do this via CSS, most are hacky workarounds, and honestly its WAY easier to do with Javascript. But for pure CSS, it usually goes something like this:
1) Setting * to border-box:
* {
-webkit-box-sizing:border-box;
-moz-bos-sizing:border-box;
box-sizing:border-box;
}
2) Set footer to position:absolute, with fixed height:
#footer {
position:absolute;
left:0;
right:0;
bottom:0;
height:40px;
}
3) Set html,body, and your container to height:100%, min-height:100%, and your container position to something other than static, and padding-bottom to whatever your footer height is + a little gap (if you want):
html,body,#container {
height:100%;
min-height:100%;
}
#container {
position:relative;
padding-bottom:50px;
}
This should handle it decently well for IE8 and above. For IE7 and below ... well that gets pretty damn tricky, you can google that one if you'd like. :) Some notes:
The box-sizing declaration is needed to ensure height of 100% includes padding (otherwise it would just be 100% plus the padding you gave it).
when position:absolute is used on a child element, position other than static must be declared on the parent for the childs position to be relative to the parent, otherwise it will be the first parent up the DOM tree with position other than static (in this case, it will just be the window).
I have some text that I display in a div with the following CSS:
.fixed-box {
position:fixed;
top:10px;
width: 270px;
}
This is so that when I scroll it always shows on the top of the screen. However when there is a lot of text the div gets cut off, because the position:fixed prevents it from scrolling down with the page it's on.
I was going to switch to an iframe, but is this really the best way to go?
Add overflow:auto; and set height property either to 100% or manually.
Here is code example http://jsfiddle.net/7ZVb8/
I tried height: 100% but that seems to just be the height of the viewport.
My page scrolls, so I would like for the height to be set to the entire window basically.
Here is a live example - http://jsfiddle.net/gtKBs/750/ (trying to figure out the divider height).
Note, I don't want to move the div, I just want to set the height to the maximum height of the window.
Thanks.
Edit 1
Or even better yet, what I would like to happen is as I scroll the divider stays the same proportion and scrolls with me - i.e. say it is total height of 90%, then as I scroll, I always see the space # top & bottom, indicating that it is just 90% height of the current viewport.
Edit 2
This is what I am trying to do - http://jsfiddle.net/ryBZG/1/ A span 2 divs, span2, span9 where the span2 is a sidebar and the span9 is the content of the page. I want to put a divider between them.
Try to change the CSS of your divider div to the following
.divider{
position:fixed;
left:50%;
top:10%;
bottom:10%;
border-left:1px solid white;
}
As your #bluebox has a fixed width: 550px; I recommend to set your .divider's width to a fixed width (260px), too.
HTH
Andy
I can't figure out how to make it so that when a window can't display the whole image, it cuts the image on the left.
This code always cuts the right side using:
img {
position:fixed;
}
You just need to add right:0; if you want to cut the left side on resize. Check this fiddle: http://jsfiddle.net/H3Vqc/1/ and test.
Further:
If you want to resize the image when you resize the browser then use width: 100%.
If you want to hide the right side set position: absolute; and left:0;
or u can simply apply dir="rtl" on the div the image is on this results on what you want
<div dir="rtl"><img src="yourImg.jpg"/>
</div>
Strictly assuming if you are using css background you can use the background-position property to position your image, and use width and height to get it to the right size
You likely want to set max-width: 100% to the <img>, like this: http://jsfiddle.net/H3Vqc/4/
I am designing a responsive layout and have positioned a grungy png overlay on top of background using the following CSS:
#bg{
background:url(images/top1.png) no-repeat;
position:absolute;
width:1423px;
height:350px;
top:0;
left:50%;
margin-left: -711px;
}
This way, the image is always centered regardless of the page width. My problem occurs when the browser window is reduced to a width smaller than the background image for the #bg overlay. A horizontal scrollbar appears and the background extends far to the right (especially when the browser is very small).
You can see a DEMO of this here: http://pixelcakecreative.com/cimlife/responsive2/
As you can see a horizontal scrollbar appears, I would like browser window to shrink and not retain the full width of the image! Any ideas?
try this css code:
#bg{
background:url(images/top1.png) no-repeat center;
position:absolute;
width:100%;
height:350px;
top:0px;
left:0px;
}
Just had a quick look at your code. Check out your nav, this one produces the scrollbar.
Have a look on how to enable developer tools in your browser to inspect your page. It's a good way to check on your elements attributes.
Here's an good introduction for Chrome: Link
And for Safari: Link