I am injecting html at runtime into my page:
document.getElementById(divId).innerHTML='<object type="text/html" data="'+pageUrl+'"></object>';
The data injected happens to have a scrollbar and not stretching 100%...so I've added this:
document.getElementById(divId).innerHTML='<object type="text/html" data="'+pageUrl+'" style="width:100%;height:100%;"></object>';
This fixes the width issues and makes the content 100% width but the height has a scrollbar and I don't want it to scroll, I need it to stretch.
I've also tried height:auto; but it's not stretching.
How can I get it to stretch to the whole height?
For the 100% height to work, every parent element (including html and body tag) needs to have a defined height of 100%.
Related
document.body.height = document.getElementById("page-main").clientHeight + 400;
#page-main {
position:absolute;
width:100%;
height:2000px;
z-index:2;
background:#eeeeee;
}
#footer {
position:fixed;
width:100%:
bottom:0px;
height:400px;
z-index:1;
background:#aaaaaa;
}
<body>
<div id='page-main'>main</div>
<div id='footer'>footer</div>
</body>
I have a footer div with position: fixed; bottom: 0px; and a main content div with position: absolute;.
Basically the idea is to have the main content div act like a sheet of paper on top of the static background of the document, so you would scroll through the content of the page and when you get to the bottom you would need to be able to scroll a couple hundred more pixels to reveal the footer div below the main content div.
I allowed this in my landing page by finding out the height of the body necessary to facilitate this extra space at the bottom and setting the height using height: 1720px; on the body itself. However, I'd like to implement this in a way that it does not need to be constant, as I fear browsers and devices may have different rendered heights for the main content div and I'd like to use this on multiple pages without having to individually hard code the body height.
I tried using JavaScript to find the height of the main content div (using clientHeight, which seems to work perfectly) and add a couple hundred pixels to that number for the height of the body as follows:
document.body.height = document.getElementById("page-main").clientHeight + 400;
and also tried changing the following:
document.body.style.height
document.body.style.paddingBottom
This does not change the height of the body at all. I tried using a similar approach to change the body's background to red, which works, but for some reason it just refuses to change the height specifically. I've tried placing this script in the head, above the body, and at the end of the body. Doesn't help. Finding the clientHeight of the main content div works fine, adding 400 to that number seems easy enough, and I know the document definitely has a body, so I'm very confused as to why it could possibly be that JavaScript refuses to change the height of the body.
I've checked the console in Edge and Chrome and it seems there's no issue, so I'm completely lost here. Normally I can find answers online and I've never had to ask for help but at this point I feel like it's such a simple question and I have no idea why it won't work.
Sorry if this question is't written well, but does anybody have an idea of why JavaScript might not be allowing the changing of the height of the body?
TL;DR:
content div is positioned absolute and can change depending on scenario
footer div is positioned static on the bottom and is supposed to be revealed below the content div by allowing user to scroll a couple hundred pixels below the end of the content div
I want to achieve this by altering the height of the body, which works perfectly through hardcoding in html but for some reason JavaScript refuses to change the height of the body
Try it like this:
document.body.style.height = document.getElementById("page-main").clientHeight + 400 + 'px';
You have to specify the units to get a proper result. Like you would do in CSS.
Setting the height of the body element, the way you want in your question, is complicated by it's relationship with html element and their default CSS (like position: static on body), and by the overflow property. Read more here.
From my experiments on the chrome console, you can't set body height via document.body.clientHeight, it seems to be read-only. You'll need to set height (and possibly overflow) properties in CSS (via document.body.style for javascript).
However, I think the best solution for the effect you want doesn't involve setting body (or html) properties at all. Try this:
Let the footer element by default have CSS: display: none
Detect when user has scrolled to the bottom of the page (using jQuery or scrollTop) or bottom minus some offset
Change the footer's CSS to display: block (by toggling classes preferably, or editing the style property). This will automatically increase the body's scrollbar to accommodate the footer.
When user scrolls back up beyond the footer (or point 2 is false), you set it's CSS to display: none again.
With the above approach, there is no need to hard code or know before hand the height of your footer and non-footer content. You don't need to mess with html or body element CSS. You can also apply CSS animations if you want!
Is there a way using css and html to control the maximum scrollable height of a page, regardless of the content which is present on the page?
For a concrete, hypothetical example: say the <body> is incredibly simple - a <div> which is 5000px tall. How would you set the scrollable height to be only 2000px?
Thus it would appear that the 2000th pixel is the last pixel on the page. The browser's scroll bar would appear to be at the bottom, not just "stuck" halfway down the page. Am I missing something simple to achieve this behavior? I would prefer pure css/html because it seems like it should be doable, but I would accept js.
You can do something like this
HTML
<div class="outer">
<div class="inner">
<!--your content here-->
</div>
</div>
CSS
.outer {
height:2000px;
overflow:auto;
}
.inner {
height:5000px;
overflow:hidden;
}
You should set the body height to a specific number and set overflow to hidden.
body{
height:2000px;
overflow:hidden;
}
Made an example here
Use max-height or height css properties and overflow:hidden on your container element. It will hide everything that is greater than the height you specify, therefore limiting the scrollbar height.
I should also mention that you can use overflow-y:hidden will achieve the same thing, but will only affect top and bottom edges of an element. See more details here.
Using this site as an example : http://www.reebok.com/en-GB/
The header div height adjusts dependent on the size of the browser, and the inner content has 100% height & width.
Is this controlled by javascript of can this be done solely with CSS?
You can only do this with the help of html & css. Write like this:
img{
width:100%;
height:auto;
}
check this http://jsfiddle.net/e8V47/
In your page, it's actually Javascript which is used.
The height of the container is modified inline (the style attribute)
<div class="module module-hero use-full-width displayed" data-module="Hero" style="height: 232px;">
It's however possible to do a similar thing with CSS, using % in height. For example :
.module{
height:40%; // A percentage relative to the parent element
}
the image in your example is adjusting by browser, it's in , if you only set up the width or height, the browser will adjusts another automatically.
http://dev.anuary.com/1f1715ac-ad96-536a-a462-74381c7a2baf/test.html
http://dev.anuary.com/1f1715ac-ad96-536a-a462-74381c7a2baf/test2.html
test2.html is the expected behaviour. However, it does not implement test.html CSS body {overflow: hidden;}. The latter is needed to prevent WekKit from overscrolling.
Essentially, I need a page with WebKit overscrolling disabled, with an element in DOM width and height 100% (100% meaning window size) and overflow-y: scroll. The only workaround that I managed to figure out is to use JavaScript to give fixed height to the or the wrapping element. Though, preferably I am looking for a solution that doesn't involve JS.
You need to set height: 100%; on html and body otherwise they will be much larger than the visible window size.
Demo: http://jsfiddle.net/ThinkingStiff/8ejtP/
html, body {
height: 100%;
}
The content of a page is loaded inside a div:
<div id="content">Some content</div>
The div has a fixed height and uses scroll in case of overflow. I want to adjust the height (make it smaller) of the div onload if the content does not need the fixed height of the div. How can i meassure the height of the content inside the div?
I tried to work the other way arround. No fixed height and after loading of the page meassuring the height of the div and on overflow adjusting the height of the div to a certain max. But that gave problems with certain images in the content that have no set height and width. The browser gives back a wrong height of the div because the images may not be loaded yet. Even with $(window).ready(...
Any help is appreciated!
What about just setting max-height in the CSS?
And for IE6, you could use CSS expressions:
<!--[if lte ie6]>
<style>
#content {
height: expression( this.scrollHeight > 499? "500px" : "auto" );
}
</style>
<![endif]-->
This is very ugly, but so is IE6...