I'm trying to use html to set the height of an iframe to 100% (which I have successfully done), but I also added an extra line of text at the top, so it's ~16px too tall (which requires a scroll bar). Is there a way to change the iframe to display something like height="100%-16"?
Using calc(), you would use the following: height: calc(100% - 16px);
Unfortunately, this method doesn't have full support across browsers: reference here.
Example here
If you’re trying to make the <iframe> fill the entire window except for the part with the text, use absolute positioning instead of setting specific dimensions:
#my-frame {
position: absolute;
top: 2em; /* Whatever height you like */
/* All the other ones are just distances from each side, not sizes */
left: 0;
right: 0;
bottom: 0;
}
This works for all elements and takes into account both border and padding.
Related
hey guys a few days back , i was having a small difficulty centering a input element , and somebody proposed the following solution(FIDDLE HERE)
The CSS is pritty straightforward and standard CSS , have a look ::
header {
position: relative;
}
header img {
display: block;
max-width: 100%;
}
.location-search-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.input-group {
margin-top: -17px;
top: 50%;
position: absolute;
}
now this totally acheives what i want to achieve , but the same guy , proposed another unusual solution , using padding , i really liked the padding solution as it was less hassle , but i could't quite understand or grasp what was happening , here is the solution with padding ::
header {
position: relative;
}
header img {
display: block;
max-width: 100%;
}
.location-search-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 30%;
}
.input-group {
margin-top: -17px;
}
FIDDLE HERE
Notice how padding-top:30% is doing the trick. I would really like to understand how this is working , can somebody give me the basic idea ? this is a much more cleaner and elegant solution i feel . When i asked the same guy how exactly the solution works , he said the following :
As I said, top padding uses the parent's width as a basis. Depending
on aspect ratio, it must be lager or smaller than half the parent
height .
but once again i could't quite understand. can somebody simplify this .
Thank you.
Alex-Z.
The native size of the image is 1200 x 700 pixels. It is resized to fit the window width. For example, suppose that the window is 1000 pixels wide. In that case the height of the image will be 700 x 1000 / 1200, or 583 pixels. In all cases, the ratio of height to width will be 0.583, or, roughly, 60%.
The rule padding:top: 30% tells the browser to add top padding equal to 30% of the container's width. (Padding properties are unusual in that the percentage is always taken as a percentage of width, even though, as in the case of padding-top, it may effect the vertical position and sizing.)
30% is half of (roughly) 60%. Voila!
It is just two variations of the same solution. Absolute position an element and push it a percentage down the page. The cleaner, second one uses a % that removes the need to offset. The original pushed further than needed then pull back a little.
Another approach is to use transform: translateY(-50%); although a little restrictive on the cross browser side of things. There are loads of ways to achieve things in CSS. Some more 'valid' than others.
http://davidwalsh.name/css-vertical-center
Browsers use parents width when calculating percentage for margin values. It seems a bit confusing.
But I think that it is logically correct, because margins are assumed to be used to separate one element from others, and you mostly want this separations to be equal on all sides.
For alignment you can set you elements top, left, bottom, right properties and they should be of position: absolute;.
This properties use non position: static; parents height and width accordingly when used with percentages
In your situation you can use top: 50%; for .location-search-container and assing negative margin-top:-17px; to compensate elements origin to center. Or alternatively set transform: translateY(-50%). This way you don't need to know size of your elements in pixels, and if you are not supporting older browsers.
Here is the [FIDLE][1] example that centers your element veritcally and horizontally. You can change transform property to margin, but you should set half of your elements width and height in pixels
I have a table on my webpage, that uses a specific print CSS, that removes all the web site elements so that it can be printed on posters.
What I do is:
Visit the page with Google Chrome,
Click: File -> Print -> "Print using system dialog...",
Click PDF -> "Save as PostScript", and
Process with Adobe Distiller (150 dpi & 18” x 24”).
Since I want my table to fill the 18"x24" (18/24 = 3/4) poster nicely, how can I make sure that its width/height aspect ration is 3/4, without putting in specific dimensions that would come to bite me in print?
For now, the only solution that came to my head is the one where you'd have to wrap the table with two additional divs.
Here's the fiddle
As we speak, I'm trying to improve the solution to get rid of the divs.
At the moment I'm using one div as a wrapper with width set to 100%, then inside of it there is another div (innerWrapper) which is positioned absolutely and spread to the wrapper's dimensions. To set the div's height I used a simple trick - added a pseudo :after element to the wrapper which has padding-bottom set to 133%. Padding percentage values are inherited from parent's width (yes!). In case of somebody asking - we can't ommit the innerWrapper div and set its style directly to table becuase top, right, bottom, left method won't work for it (neither width and height set to 100%). Divs are block elements, tables have display: table.
Whole code looks like this:
HTML:
<div id="wrapper">
<div id="innerWrapper">
<table></table>
</div>
</div>
CSS:
#wrapper {
width:100%;
position: relative;
}
#wrapper:after {
content: "";
display: block;
padding-bottom: 133%;
}
#innerWrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
table {
width: 100%;
height: 100%;
}
I'm writing a mobile/desktop chat application that is supposed to utilize the entire screen. The bottom <div> shown in yellow can be fixed-height if it needs to be.
presently it's Absolutely positioned to the bottom of the window.
My problem: the top <div>, in cyan, doesn't fit to the rest of the window, regardless of whether I use padding, margin, border, etc. Presently it appears to allow the content to wrap, but that's only because the bottom overwrites the scroll bar.
My only solution so far is to have a final <div> or <br> that pads the end of the scrollable div, but that doesn't make the div smaller, or make the scroll bars properly align.
Here is my source code so far in Fiddle.
Can you edit your CSS and set the DIV with the chat text a class like .break-word and then in CSS declare it with word-wrap:
.break-word {
word-wrap: break-word;
}
Unsure on the covering of scrollbars. You should post your code for others to view and might be able to pick something out.
This style code basically sums up what I'm doing to compensate for my issue. (Instead of, say, using HTML tables.) This may not be the best solution.
#topPart {
position: absolute;
width: 100%;
top: 0;
bottom: 40px; /* or however high the bottom is */
}
#bottomPart {
position: absolute;
width: 100%;
bottom: 0;
height: 40px; /* same as above */
}
My problem seems very basic but I can't get it to work.
I'm trying to create a lay-out with no header, a footer always at the bottom and two columns. The right column has a fixed width (770px) and the left column should use the rest of the space. In the left column OpenLayers will be used which will fetch Google Maps images to fill the space.
The page needs to be visible on smaller screens as well and should work in FF, Chrome and IE7+.
I'm starting with a wrapper that has a min-width of 1200px. This is for the smaller screens. Scrollbars will appear then.
Next I've created 3 divs inside the wrapper: leftframe, rightframe, bottomframe.
The bottomframe used this CSS:
bottom: 0;
height: auto;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: auto;
width: auto;
min-width: 700px;
z-index: 5000;
This works good. The footer is always nicely at the bottom.
Now the problem comes. When I resize my viewport or show the page on a small screen the leftframe must resize to fill the remaining space. I've tried a lot: floats, positions.
What seems to be working is to absolute position the right frame and give the left frame a margin-right the same as the width of the right frame (770px):
#leftframe {
width:auto;
height: 100%;
margin-right: 770px;
}
#rightframe {
position: absolute;
right: 0;
top: 0;
width: 770px;
}
This seems to work as well. At least for the width.
The right frame is dynamically filled with data I get using AJAX. In some occasions the returned data is larger than the min-height I've given to the wrapper. This is fine for the right frame, its height is adjusted but the height of the wrapper isn't and thus the height of the left frame isn't adjusted as well. This result in a right frame that is higher than my left frame and a blank space is between my left frame and footer.
How to solve this? Preferable without using jQuery or similar but with CSS only.
[Edit]
Using the example provided by Zuul I've created these few lines of jQuery and it seems to work now.
These lines are called when I'm finished processing the AJAX data.
var currentHeightRight = parseInt($("#rightframe").css("height").replace("px", ""), 10);
var currentHeightWrapper = parseInt($("#wrap").css("height").replace("px", ""), 10);
if (currentHeightRight > currentHeightWrapper)
{
$("#wrap").css("height", currentHeightRight);
$("#map").css("height", currentHeightRight);
}
If I've understood your problem correctly, I've made a Fiddle to show a way to deal with your problem:
http://jsfiddle.net/zuul/TdTCU/
Additionally, there's a button there, to simulate the global resize :)
Notes:
The better solution for this kind of problems is the absolute position of elements inside a wrapper. Basically setting up a structure for all rest.
I'd like to create a that extends from wherever it starts to the bottom of the page, but does not extend beyond the bottom of the page. It has overflow-y: auto, so that if the div content is too long, a scroll-bar will appear (for that only, not for the whole page).
I tried height:100%, but that makes the height equal the page height... so if the doesn't start at the very top of the page, it ends up being too tall.
(Example: window height is 100px; stuff at the top of the page take 20px; I want the to be 80px high. But I want it to be automatically resized to 70px if the window is resized to 90px.)
Can this be done without JS? If not, how do I use JS to do that? (Using FF 3.x, but a cross-browser solution is of course preferred.)
Sounds like you want something along the lines of the following:
#myContainer {
position: absolute;
top: 20px;
bottom: 0px;
left: 0px; /* Should include space for a sidebar, if you have one. */
right: 0px; /* Same as above */
}
OK, found the solution -- making the position absolute and setting the bottom to 0 (and top to whatever the top is).
Have you tried setting the body margin's to 0?