I have three floating divs that are supposed to be of same height always. But the height should be the height of the longest floating div.
I have set up media queries, so this should work in all three cases.
I was unable to use faux columns since I have space between all three sections.
I created a fiddle.`
I have to do this assignment with float so please don't ask me to remove float and use tables or something. *
enter code here
Please resize the window to see effect of media queries.
Thanks.
Use window.getComputedStyle to calculate the height of the section.
Loop in section and compute the max height. Then assign it as the section height.
var maxHeight = 0;
$('section').each(function(index, element) {
var style, height;
style = window.getComputedStyle(element);
height = parseInt(style.height);
maxHeight = height >= maxHeight ? height : maxHeight;
});
$('section').css('height', maxHeight + 'px');
Fiddle Link
Set max-height and min-height to elements .I changed your code and now all have the same height
https://jsfiddle.net/75r9mbxn/2/
Update :
https://jsfiddle.net/75r9mbxn/8/
Now it changes based of the highest height of the elements, it changes on load,you can make it change on updating the section
Related
My element's height increases depending on what the user does with it. If I give it a wrapper div, and give that div an explicit pixel height and overflow:auto, it works as I would want it to (when the element becomes bigger than the height of its parent, it doesn't increase the size of the parent). I want the wrapper div to be as big as the space available on the page, but not allow it to expand beyond that. Giving it height:100% doesn't work, it just gets bigger. Giving it height:100vh also doesn't work because there are other elements on the page and so the size is too big.
I want the wrapper div to be able to expand until it becomes too big for the viewport (which height:100vh would achieve if it were not for the other elements on the page).
Basically I'm looking for something like height : amount of available space in the viewport.
This is what I ended up doing:
var viewportHeight = $(window).height();
var offset = $('#gridWrapper').offset().top;
$('#gridWrapper').height(viewportHeight - offset);
I execute the same stuff again on resize. gridWrapper is the id of the wrapping div.
you can use height:80vh or similar depends on the height of your other elements
function resizeElement() {
var height = $(window).height();
var neededHeight = (70 * height) / 100; //If you want 70% of the viewport
neededHeight = parseInt(neededHeight) + 'px';
$("div").css('height',neededHeight);
}
$(document).ready(function() {
resizeElement();
$(window).bind('resize', resizeElement);
});
You can try this. You may need to check what value do you get in var height. Depending on that you can append px or not in neededHeight. This is basically the logic.
Hi HTML/CSS Developers !
Stuck in a strange scenario
will try to explain my query through images.
Need it to work in IE 8 or 9 atleast.
Points:
its an approach for a responsive layout,
.container {width:100%;margin-left:auto;margin-right:auto;display:block;}
.parent-container {width:auto;overflow:hidden;margin:0 auto;display:block}
.child-element {width: 285px;float:left
}
Hierarchy
.container > .parent-container > .child-element
Labels:
I have a 100% container
inside it, I have a parent-container {no width-declared (red background color)}
inside that i have child-elements with a fixed width.
What I want that, no matter, what my screen size is, if there is space for 3 child or 4-child elements, my parent element should always be in center.
width of child elements should contribute to parent-elements width
This is what i have
This is what i am getting
This is what i want it to be (see the parent-width is reduced depending upon child-element)
FIDDLE
http://jsfiddle.net/happy2deepak/9wm7ppwL/2/
You need some javascript to update the parent container's width according to the window width, you can do it by dividing window width by child width (padding and margin included) and take the maximum possible children which is the floor of the division result
function setContainerWidth(){
var childWidth = 305,
winWidth = $(window).width(),
parentContainer = $('body').find('.parent-container'),
minChildren,
containerCalculatedWidth;
minChildren = Math.floor(winWidth / childWidth);
parentContainer.css("width", minChildren * childWidth);
}
setContainerWidth();
$(window).resize(setContainerWidth);
a fiddle to see how it works.
Please look at this website , I use section for every page, as you can see by going to down to the second page there is some extra space that belongs to the first page(the following picture).
There are four section and every section height is set 100%. then why there is an extra space there?
The min-height for the body is set to 1000px to ensure that each block you can scroll to on the site has enough space to cover the viewport. So, if your height at 100% for one section is less than the 1000px minimum, then you'll end up with a huge space because the minimum is larger than what you really need.
You can optionally set height to an absolute value (x px where x < 1000) until the space is gone. Something like #s1 { height: 700px; } would work, where #s1 is the section you pointed to in your question, and 700px is an example of a height that would mostly remove that space, but leave enough in between sections 1 and 2. Feel free to modify that value until you're satisfied with the look.
What you need is javascript. This is off the top of my head, and is general, but try something like this:
jQuery(function($){
$(window).bind("load, resize", function() {
var sections = $("section");
var height = $(window).height();
height = $(window).height();
$(sections).height(height);
});
});
I am trying to setup a liquid layout for a page and I am having great difficulty adjusting the height of the divs. I don't want a fixed layout because I want the page to fit like a glove, no matter the size of the screen. I am using only percentages, no pixels or em. The layout of the page looks something like this:
header
wrapper
left column, top
left column bottom
right column, top
right column, bottom
footer
Now, I want to make left column, top 50% height of the page and left column, right the other 50% height of the page. The problem is the content overflows and gets cutoff, forcing me to use scrollbars and set pixel height. This is not what I want. Ideally, I'd like to set the divs to 50% of the page AND use scrollbars if the content overflows. Does that make sense?
How do I go about this? I would really appreciate any help.
Thank you very much.
This would be something better suited for jquery. You can call it to resize the height on load and on window resize.
To get the window height and width you would use
windowHeight = $(window).height();
windowWidth = $(window).width();
You take this and assign it to a variable and subtract the heights of the header and footer. And in set the css by using
${'#content_container').css({width: windowwidth+"px", height: windowHeight+"px"});
Then if someone resizes the window you run the same options in a function like the following
$(window).resize(function() {
//update stuff
});
Your code would look something like below but change would do the same thing for each one.
$(document).ready(function(){
windowHeight = $(window).height();
windowWidth = $(window).width();
divHeight = (windowHeight - 100 - 100)/2; // heights of your header/footer
divWidth = windowWidth / 2;
$('#content_container').css({width: divWidth+"px", height: divHeight+"px"});
});
$(window).resize(function() {
windowHeight = $(window).height();
windowWidth = $(window).width();
divHeight = (windowHeight - 100 - 100)/2; // heights of your header/footer
divWidth = windowWidth / 2;
$('#content_container').css({width: divWidth+"px", height: divHeight+"px"});
});
you can replace the 100's for static calls of height by assigning variable and call $('#divid').height(); Since your header is position:absolute, if you subtract the header then you will need to position the div from the top the same px.
To call js include the following before the javascript above.
<script src="http://code.jquery.com/jquery-1.6.4.min.js" />
I want to insert an image in a webpage and I want it to fit in a 120*40 space.
The problem is, original images can have about any size (400*40, 30*220, etc.)
so if I set height attribute to 40, I might find myself with images larger than 120 width. The same goes if I set a 120px width.
If I set both width to 120 and height to 40, well it fits, but the original ratio is lost, and I don't want that.
What would you suggest ?
Get the original properties of the image in javascript and then set one of them (either to 120 width or 40 height) so that the other fits in 120*40 ?
There are a lot images like that in one page so I think this method is a bit heavy...
PHP solution :
<?php
list($width, $height, $type, $attr) = getimagesize($image);
if($width/$height>3)
$height *= 120/$width;
else
$height = 40;
?>
<img src="<?=$image?>" height=<?=$height?>>
see below for a javascript solution and a CSS solution
css properties max-width and max-height are what you need.
My guess is that it will resize itself if it reaches one of these.
I have used this alot in previous web projects.
But i havent used the combination of both yet.
EDIT: I've sais this in a comment, but setting both those properties does work in my tests. It keeps the ratio and resizes by the limit it reaches first. Do not set any width or height properties, these might cause problems
JavaScript is quite fast, so why not try it?
I'd just stick to finding the aspect ratio and adding some checks:
var width = image.width;
var height = image.height;
var ratio = width / height;
if (width > 120) {
width = 120;
height = 120 * ratio;
} else if (height > 80) {
height = 80;
width = 80 * ratio;
}
image.width = width + 'px';
image.height = height + 'px';
As you seem to be using PHP, ImageMagick can resize an image to fit inside of a predefined box. I only know how to do it via CLI, as I don't use PHP, but I bet the PHP code would be simple.
I was actually searching for an answer to a different query but came across yours.
I use this to resize images which I am finding is very handy in a number of my scripts, but what I would suggest is that you resize the image to a little bigger than the longest side of the container and then use css to center the image both horizontally and vertically and set the container with overflow:hidden;
You lose a small bit of the image around the edges but at least they are all inserted without any stretching or squashing.
Hope that helps you or anyone else trying something similar.