I am giving body height 100% by using this code:-
<div class="container" id="container" style="background-color:#FAFAFA;">
<div class=" span5 fill">
</div>
</div>
And css is:-
.fill{
height:100%;
min-height:100%;
}
.container{
height:100%;
min-height:100%;
}
But when i am adding dynamic content in 'fill' div, then content not in 100% body tag.
I noticed you tagged jQuery so here is a simple function that you can use to set the height dynamically. It also changes based on the browser resizing.
Fiddle:
http://jsfiddle.net/xfnyzcos/
jQuery Code:
function setHeight(){
var winHeight = $(window).innerHeight();
$(".container").css("height", winHeight + "px");
$(".fill").css("height", winHeight + "px");
}
$( window ).resize(function() {
setHeight();
});
setHeight();
Related
Well, I'm using Materializecss framework and I have a issue with the footer. Materialize's footer have a variable height. In small devices, it gets bigger. So I can't use the classics method that use a padding-bottom equal to footer height.
My CSS:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height: 100%;
position: relative
}
#conteudo {
padding-bottom:425px; /* Fail height equal to footer height */
}
#rodape {
width:100%;
position:absolute;
bottom:0;
left:0;
}
My HTML:
<html>
<body>
<div id="wrapper">
<div id="conteudo">
<div class="container">
</div>
</div>
<div id="rodape">
</div>
</div>
</body>
</html>
I tried to add this script, but doesn't work:
JS:
$(document).ready(function fix_layout(){
if($(#rodape).height()<350){
$("#conteudo").css("padding-bottom", "276px");
}
if($(#rodape).height()>350 && $(#rodape).height()<500){
$("#conteudo").css("padding-bottom", "354px");
}
if($(#rodape).height()>500){
$("#conteudo").css("padding-bottom", "506px");
}
$(window).trigger('fix_layout');
});
Help!
If a jQuery solution is fine for you, then you can count the footer height and add it as padding-bottom to #conteudo, either once on DOM ready or on resize:
$(document).ready(function(){
var $conteudo = $('#conteudo'),
$rodape = $('#rodape'),
addPaddingBottom;
addPaddingBottom = function addPaddingBottom(){
var extraPadding = 6,
rodapeHeight = $rodape.height();
$conteudo.css({
'padding-bottom' : (rodapeHeight + extraPadding) + 'px'
});
}
//make it once on DOM ready
addPaddingBottom();
//and recalculate padding when window is resized
$(window).resize(addPaddingBottom);
});
I have a div of height 90 pixels. Below it is an iframe.
I would like to figure out how to write javascript (or jQuery) to always set the iframe to the correct height to occupy the rest of the screen. If there is a better HTML5-based solution I would love to know about that too of course.
Javascript:
$(document).ready(function() {
var $window = $(window);
function checkSize()
{
var windowHeight = $window.height();
var frameHeight = windowHeight - 90;
$('iframe').height() = frameHeight;
}
checkSize();
$(window).resize(checkSize);
});
HTML:
<body style="overflow:hidden;">
<div style="height:90px;">
Content goes here
</div>
<iframe src="www.someurl.com" style="width:100%; height:900px; seamless: seamless; frameborder: 0;"></iframe>
</body>
Display your iframe as block first of all. You can then use the top of the iframe relative to the window height, to work out how far it is until the bottom:
jQuery
$(window).on('load resize', function(){
$window = $(window);
$('iframe').height(function(){
return $window.height()-$(this).offset().top;
});
});
CSS
iframe{
display:block;
margin:0;
padding:0;
border:0;
}
JSFiddle
Some CSS may do the trick:
body, html { width:100% ;
height:100% ;
overflow:hidden ;
}
iframe { width:100% ;
height:100% ;
border:none ;
}
fiddle
$('iframe').height(frameHeight)
fiddle
Try this
I am trying to center this brand logo vertically and horizontally on the whole page with JQuery. It does work on browser resize but not initially. Notice this code resizes the image to fit the page. I tried $(window) and $(document) JS is:
$(function() {
var resizeToFit = function(){
var $this = $(document);
var imgw = $("#overlay-logo img").width();
var pw = $this.width();
var $overlaylogo = $("#overlay-logo img");
$overlaylogo.css("width", pw - 100);
var left = (pw / 2) - (imgw / 2);
$overlaylogo.css('margin-left',left);
}
$(window).resize(function(){
resizeToFit();
});
resizeToFit();
});
CSS:
#overlay-logo{
position:absolute;
top:50%;
z-index: 999999;
}
HTML:
<div id="overlay-logo">
<img src="img/overlay.png" alt="overlay" />
</div>
you should be able to do this with just straight css.
#overlay-logo{
height:99%;
width:99%;
margin:auto;
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
}
here's a fiddle: http://jsfiddle.net/GheZd/
EDIT
Just make your height and width 99% then. You can put apply this style directly to the image...you don't necessarily need the div.
I am designing a page where bottom part of a div should touch the end of the page that is no bottom margin or padding so I put height of the main div as
$(function() {
$('.divMain').css({'height': (($(window).height())) + 'px'});
$(window).resize(function() {
$('.divMain').css({'height': (($(window).height())) + 'px'});
});
});
My HTML is :
<div class="divMain">
<table id="eduGrid"></table>
</div>
where "eduGrid" is generated dynamically(Bootstrap).
Initially its work fine but I have some contents in that div that can be added at the user end(add new education etc) so that contents are moving outside the main div and its looking wired.
Check this for full screen result - http://fiddle.jshell.net/DRRsn/1/show/light/
Check this for fiddle code - http://jsfiddle.net/DRRsn/1/
CSS
html,body{width:100%;height:100%; overflow:hidden; margin:0;padding:0;}
div{background:blue;}
table{background:pink;height:100%;;width:50%}
HTML
<div class="divMain">
<table id="eduGrid"></table>
</div>
JS
$(function() {
$('.divMain').css({'height': (($(window).height())) + 'px'});
$(window).resize(function() {
$('.divMain').css({'height': (($(window).height())) + 'px'});
});
});
Hope this is what u were looking for.
Apologies if this isn't what you're looking for - I think it is? - but if you wish the 'divMain' to take 100% of the browser window's width & height, you can do this with CSS - simply by making it a position:absolute <div>
.divMain {
position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: auto;
}
So by default it will have 100% height, but if the <table> content is higher than the page, divMain will stretch out.
(Tested on Chrome)
Thanks guys but I have found a solution for this problem..I have changed my function body as :
$(function() {
$('.divMain').css({'min-height': (($(window).height()) - 70) + 'px'});
$(window).resize(function() {
$('.divMain').css({'min-height': (($(window).height()) - 70) + 'px'});
});
});
So now initially main div have minimum height as browser height and when content of main div got increased then height of main div will also increase.
I want re-sizable feature like jsFiddle : link. If i explain in my own words there are four layouts
[1. HTML, 2. javascript, 3. CSS & 4.Result] and we can re-size the layout inwards & outwards. I have been tried to make resizable using jQuery but failed to do like jsFiddle.
my example: CSS
#parent { position:relative; width 100%; height:100%;}
#left {position:absolute;left:0; width:48%;height:100%; border:1px dashed; }
#right {position:absolute;right:0; width:48%;height:100%; border:1px dashed; }
<div id = "parent">
<div class="resize" id = "left"> </div>
<div class="resize" id = "right"> </div>
</div>
js: $(function() { $('.resize').resizable( { handlers: 'n,e,s,w' } );
});
in example, there are two layout left & right, are equals in size. when i resize any div then other div should change it's size too but it doesn't make any difference in size while jsFiddle does.
Add the jQuery css in your code and it will be working fine.
add this line:
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
**Editing**:: Use this one: It will work for left div. try this :)
/*my example: CSS */
#parent { position:relative; width 100%; height:100%;}
#left {position:absolute;left:0; width:48%;height:100%; border:1px dashed; }
#right {position:absolute;right:0; width:48%;height:100%; border:1px dashed; }
/*my example: JS */
jQuery(function() {
jQuery('#left').resizable({
resize: function(event, ui) {
var leftWidth = ( 100 * parseFloat($('#left').css('width')) / parseFloat($('#left').parent().css('width')) );
var rigthWidth = 100 - leftWidth - 4;//4 is ur distance between two divs
jQuery('#right').css('width', rigthWidth + '%');
}
});
});
<div id = "parent">
<div class="resize" id = "left"> </div>
<div class="resize" id = "right"> </div>
</div>