My iframe.body has a scrollHeight property which I believe is read only
I don't understand how it gets set.
When I modify the iframe.body.innerHTML with some larger HTML, I notice the iframe.body.scrollHeight increases. Great! When we set $('#previewWindow').height(iframeDocument.body.scrollHeight) this means that the scrollbar is the right height for the new larger content
However....
When I modify the iframe.body.innerHTML with some smaller HTML, I notice the iframe.body.scrollHeight remains the same. NOT great! When we set $('#previewWindow').height(iframeDocument.body.scrollHeight) and this means that the scrollbar is too long and there's loads of whitespace to scroll to at the bottom of the inner content of the iframe
Why does it increase but not decrease in the same logical way?
What would be the best workaround?
Thanks
Related
I've been searching for two days, and trying all sorts of different options, but none of them do what I want. I'm positive this should be possible through CSS, but haven't come across the solution yet.
We want to have a single-cell table that is 100% of the page width, but a fixed page height (although we may be able to work around a % page height.) The table should either contain an extremely large image (that gets sized to 100% of the table width) or have a background image that does the same (so it never repeats, and just sizes up to always stay 100% of the table.
However, when the window is shrunk down, we want the table height to shrink, and "cut off" the image at either the top or bottom.
So far, I have no problem with the expansion issue, but I have yet to find a solution that shrinks the table height at all. It either downsizes by the correct ratio for the new size of the page, or it stays exactly the same size.
Can anyone offer any suggestions?
It would help if you posted a sample HTML and CSS, but in a more generic sense, I'd point you out to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and adding overflow: hidden to the DIV that contains the image.
This is more a question of logic rather than technical.
I have a design where my header is fixed at the top all the time, so is the footer, but the elements inside have percentage widths so the header will change in size as the window changes.
BUT, as the header is always fixed-positioned the content below is covered by it and as I do not know the height of the header I cannot know how much padding-top I must add to the content so it won't get covered by the header.
What do you say?
If height goes automatically, you will need js to control it, taking the height of the fixed div and updating top margin/padding dinamically. Anyway, it would be nice if we could see an example of what you have currently
I'm trying to make two divs fill up with width of the page using the viewport parameter vw. However, the divs' widths are not accurate and the overlap. DEMO
I could enclose them in a container and set the widths using % instead, which gives the desired results. DEMO
My question is, why do it not work with vw? If it is because viewport is inaccurate, how inaccurate is it? And what are the causes for viewport to be inaccurate?
UPDATE: When I load the first DEMO, it initially overlaps. However, when I move the slider of the window left and right several times, the overlap disappear. When I try this on my test site, the overlap is also there, but doesn't go away however I resize my window.
It's because your body has a margin. Set the padding/margin of the body to 0, and now it'll work.
The vw param in CSS is based on the whole viewport, regardless of the container it's in (% takes a percentage of the container). If there is not enough space in the container, you'll get behavior like this.
while editing the template of my blog i saw that header size is set to 660px by the css property
width:660px
.Now i want to make my header spread across the whole lenth of the browser and also i don't want to specify some specific length in pixels ,so that the blog don't look odd in widescreen vs normal monitors .how do i do that ?
width: 100%
should do the job. (Incidentally, if your header is a div or other block element, you can leave the width value away altogether or set it to auto. It will then assume the full width of the surrounding container (in this case, probably the browser window) no matter whether you've specified borders or paddings.
I am rather new to complex CSS, and have a question- I have a page which positions a floating element along the bottom of the page. It does so by setting the Bottom: 0, and Position: Absolute.
When the user resizes their browser to a very-small size, this element covers up other content on the page.
Ideally, The element would continue to float at the bottom of the browser at normal and large sizes, but if the browser window were to be shrunk too small, the browser would force a scrollbar, instead of moving the floating element any further.
Essentially, I want to tell the browser- No matter how small the window is, never render the page smaller than 800x600.
You could set html, body { min-width: 800px; min-height: 600px; }
YMMV in different browsers though.
It really depends on whether the floating footer needs to always be visible or if it can scroll off the bottom when the browser window is small.
I think some javascript might be easier to manage than a css solution. Keep in mind that min-width and min-height don't work in all browsers.
You can use jquery to make this easier. The
$(window).resize( callback )
can be used to set a callback function to handle window resizing.
I use the window dimensions as part of my resize code also.
var wh = Math.max(600,$(window).height());
var ww = Math.max(800,$(window).width());
Then I can set the size of a div in my page based on the window size.
$('div#mydiv').css('width',ww);
You can also set the value to auto to unset your specified value.
I know it is a bit of a cheat but you can use the old trick of putting in an image that is of the required minimum width in the floating element, and the same colour as it. It is then effectively invisible, but prevents the element, and therefore the whole page, from shrinking.