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...
Related
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%.
I have the below structure:
<div class="wrapper1">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
<div class="items">
<ul><li></li></ul>
</div>
The above layout is used for a responsive site. so on resizing the window or on page load on different devices the content in the right div should always remain of the same height as that of the left div.
Also, I have to append a link "more >>" responsively where the last character of the content in the right div ends.
I have used overflow hidden property for the right div and I am trying to give some height to the right div based on the window width using media queries. Have tried different things but since the text amount changes responsively it is becoming difficult to append more link to the last character.
Also, i tried using jquery/jscript to detect the height of the left div on page load so as to set the height of the right div same as that using .outerheight() property but on initial load of the page I am not able to get the height in pixels since the width of the image inside the left div is set to 100%.
Also, there are 2 main issues here,
1)I set the height of the left div same as that of the right div responsively. Here the extra content to be displayes in the right div should always be hidden.
2) append more link just where last last charcter of the last visible line of the content on the left div is responsively.
Could anyone please suggest some solution.
With flexbox the columns share the same height automatically, without any javascript.
.wrapper {
display: flex;
}
.left {
background: yellow;
flex: 1;
}
.right {
background: red;
flex: 1;
}
<div class="wrapper">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
I believe all your problem will be solved if and only if you use bootstrap css rules the grid system and furthermore make a class with specific height and assign it to the div . And more advice get familiar with media query in css3
Create a div with relative position for appending links and make it in the bottom of the container div
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.
I am using some javascript to calculate the height of the page and then set a min-height on on a div. The reason for this is to push the footer to the bottom of the page for pages that are short on content. My issue is the min-height is about 30-40 px to big thus causing scroll bars. (Note: I am not using a solution like sticky footer for various reasons and prefer this solution.)
Here is my code:
JS
$(function() {
var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
$("#page-content").css("min-height",height+"px");
});
HTML
<header class="container">
<div id="menu" class="row">
<!-- Content -->
</div>
</header>
<div id="page-content">
<!-- Content -->
</div>
<footer>
<!-- Content -->
</footer>
I believe the issue lies in my CSS. For example I have a margin in the header as so:
#menu{
margin: 5px auto 10px;
}
If I remove that code it will reduce the scrollbar just a little bit. (I have other margins set in place on the page so changing just this one will not work as a solution).
How would I re-write the JS code to factor in the margin for the header and other sections?
The <header> box's height doesn't reflect the child #menu's margins because they are both normal box elements, and if the #page-content had margins, they would overlap the #menu's margins, in which case the header's height would include some part of the content's height, which wouldn't make sense.
The issue is collapsing margins: http://www.w3.org/TR/css3-box/#collapsing-margins
As that page explains, you can get tell the browser not to collapse margins a few ways:
add display: inline-block; to your #menu { } rules (my first suggestion)
add overflow: hidden; to your header { } (a potentially better suggestion if you're having alignment issues)
make your <header> absolutely positioned, or float it. Or do that to the #menu inside.
Or if you want to go for a hack, you could calculate the header height manually:
var header_height = $("header").outerHeight() +
parseInt($("header").children().css('margin-top'), 10) +
parseInt($("header").children().css('margin-bottom'), 10);
Now that I think about it, this makes sense, and I think the css spec is doing the right thing.
Updated: http://jsfiddle.net/HzBSz/2/
Also see: Outer element margin not equal to inner element margin
For some reason the JS is not calculating the margins. I added the margins I had in the header and footer and they totaled 45px. Thus the script now looks like so:
$(function() {
var height = $(window).height() - ($("header").outerHeight() +
$("footer").outerHeight() + 45 );
$("#page-content").css("min-height",height+"px");
});
I add 45px and the script now functions correctly.
Why not just place the footer on the bottom manually? I mean, I know you said you prefer not to, but why? If you want it to always be there, do
position:relative;
bottom:0;
If you want it to scroll with the rest of the page (as it sounds like you may), use
position:absolute;
instead.
This is a much better method than dynamically inserting dummy content to push a footer down.
Perhaps you look at this
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
may solve your problem.
Try .outerHeight(true) for all your elements instead of .height() or .outerHeight():
$(function() {
var height = $(window).outerHeight(true) - ($("header").outerHeight(true) + $("footer").outerHeight(true) );
$("#page-content").css("min-height",height+"px");
});
.height() - returns the height of element excludes padding, border and margin.
.innerHeight() - returns the height of element includes padding but excludes border and margin.
.outerHeight() - returns the height of the div including border but excludes margin.
.outerHeight(true) - returns the height of the div including margin.