i'm working on this project with Bootstrap3 and this little problem came up.
I need when the page resize que last div of this block keep the same height always.
I thought about something like setting the height to 100% but since there's divs above them with diferent height they height for 100% still different.
Maybe something using calc() but I still dont know.
Here's a picture to check whats happening:
How about just define what height you want the div to be in px instead of percentage. for example :
height = 320px
Related
I have some trouble making my design work. I looked around the web a lot, but I can't find what I'm looking for.
I'm trying to make something like that: concept design
The thing is that I started by doing that with CSS only, but it's not the good solution, because if my picture has a different ratio or another reason, it will not work at all.
What I'm trying to achieve is that inside a div, I have one big image and in the other div (floating left or right), I want two small images, one over the other, taking the same height as the big one. All this (the two divs) should take 100% width of the body, but I don't really know how to achieve that. I'm not sure to understand how to make height responsive with the width...
I also have some weird margin between my images... Can you help me delete them as well?
So my code is via this link: http://codepen.io/anon/pen/MygaEB
Someone (Giovanni Perillo) suggested me to have this Javascript code:
var div1 = document.getElementById("colonne-gauche");
var div2 = document.getElementById("colonne-droite");
var height1 = div1.offsetHeight;
var height2 = div2.offsetHeight;
if (height1 > height2) {
div2.style.height = height1;
}
else {
div1.style.height = height2;
}
The thing is that it's not working at all. I'm sure it's a code I could use, but I'm not sure how to make it work in my code.
EDIT : I tried to look what I was able to do with Flexbox, but it doesn't seem to work. Flexbox allow two box to be side by side, with the same height, but it need to be the same width as well. What I want is something more responsive like the big image is taking 3/4 width and the two images (in the same div) are taking 1/4 width, but they have the same height in total as the big image. I'm sure it's totally possible to do that like all masonry layout, but me it's not really a masonry, but something that stay the same : One big image and two little, but responsive depending of image size.
EDIT 2 : The code needed should allow to change the width of each divs to make sure that they have the same height (without changing image aspect ratio). It should work with different images aspect ratio as well. The example bellow show a div with three images, but that's just to say that div should change width dynamically to have the same height.
Javascript is not necessary. You can accomplish this with just CSS. To make side by side divs equal in height you need to make html and body have a height of 100% then you have to specify a height for your container div (this can be a percentage or a specified length). In this case I used a height of 500px for the .section class. Then for the inner containers you need to specify a height of 100%. Then each image within that container needs a specified height, for one image use 100%, for two use 50%, etc. I also removed your inline styles. I also removed the section tag.
Here is the updated codepen.
Update:
To preserve aspect ratio change the height of the img tags to auto. Also, change the height of the .section class to auto. I also change the width of .colonne-gauche back to 65% and the width of .colonne-droite back to 35%.
divs are block elements. you can set display:inline-block; to make them align side by side.
I have a nav bar that I have positioned 'fixed' at the top of my page. The problem that I have is that I want to displace the entire page down by the (dynamic) size of my nav depending on the size of the screen used. Basically, I want to move the whole page down the height of this nav. To do this, I'm going to be using a padding to the nav that will affect it's height. I am using a box-sizing:border-box attribute on this nav but whenever I try and load the page, it doesn't account for the extra height added with the padding when I use jQuery's .height() function.
The div with the 'displacement' class does not have anything to it except a 100% width initially. This is the ugly result along with all of the current code
http://jsbin.com/qomepe/2
Can anyone tell me why this is happening or if I've overlooked something?
Try using .outerHeight() to get the height of the navbar.
From jQuery API docs:
"The top and bottom padding and border are always included in the .outerHeight() calculation; if the includeMargin argument is set to true, the margin (top and bottom) is also included."
http://api.jquery.com/outerheight/
var height = $('header').outerHeight();
$('.displacement').css('height',height);
Try something like this
Im trying to get pagesection to fill the browserheight. I´ve tried to apply a 100 height to all elements, but it´s not working. It works good if I set a heigh: 100vh, but It´s not the way I want to take, so I wonder what Im doing wrong?
Site: Svenssonsbild.se/Konsthandel Second and third menu are anchorlinks to the spagesections.
Setting height:100% means 100% of the height of the parent element so you need to specify the height of the parent for it to work.
If you want to set your element to 100% of the height of the browser, you need to make sure all the parent elements up to the <body> tag have a percent height.
Setting the element's CSS height to 100vh is the intended way to do exactly what you're trying to do. 100vh specifies that the element should always be the full height of the viewport, so unless you've got some other requirement that you haven't described, that's what you should be doing -- you'll need to explain why "that's not the way I want to take" if there's more to your question.
Depending on your content it might be a good idea to set the min-height property instead of the height property since the content might need more space than the available viewport size offers. Or you can just evaluate the section's height and compare it to the viewport height. Using jQuery the following might work:
$('section').each(function(){
var height = ($(this).height() > $(window).height()) ? $(this).height() : $(window).height();
$(this).css('height', height + 'px');
});
You might need to adjust the selector to fit your needs.
So I am redesigning my website: http://staging.slackrmedia.com/keenanpayne/, but I am coming across a small issue. I want each "pane" of the website to be the exact height of the window, no matter what the size. I also want the content therein to be exactly positioned in the center.
I am trying to accomplish this with jQuery at the moment:
function setSectionHeight() {
// Set section heights
windowHeightPadding = $(window).height() / 2;
firstSectionPadding = ($(window).height() - $('header').height()) / 2;
// Apply proper styling
$('section').css({"padding-top":windowHeightPadding,"padding-bottom":windowHeightPadding});
$('section.home').css({"padding-top": firstSectionPadding,"padding-bottom":windowHeightPadding});
}
setSectionHeight();
// Adjust section heights on window resize
$(window).on('resize', function(){
setSectionHeight();
});
So what this is doing is calculating the window height and dividing it by 2, so I can set the top and bottom padding on each section.
However, for the first section, to get the proper top and bottom padding, I need to subtract the height of the header, which is why I have a firstSectionPadding variable.
Then I just add the CSS to each section tag on my website, with separate styling for the home section tag.
This works pretty well, but as you can see when you visit my site, for some reason the heights are not correct.
Right now it looks like:
And it should look like:
I have absolutely no idea where this extra padding or space is coming from on the top. I think my equations are right, but perhaps there isn't something I'm taking into consideration?
This could be done with CSS. One div set to 100% height and width, with text-align:center; A second div within set to display:table and 100% height and width. Finally, a third div set to display:table-cell and vertical-align:center;
I am using the following jQuery to work out the width of a div (thats in %), to then tell another div to set it's height to that in pixels.
<script>
$("#top").height($("#left").width());
$("#bottom").height($("#left").width());
</script>
It's working really well. Now my next problem is, that I want my div called 'wrapper' to have a padding-top or margin-top of the pixel value it returns for the height. I tried changing 'height' to 'padding-top', but that didn't seem to work.
The end result is a web page with a series of 4 black div acting as a border around the edge, it calculates 5% of the with of the window, and that determine's the pixel value for how how the top and bottom black div's are. That way it's exactly even. Now I want my inside wrapper div, to start exactly that far down the web page too.
Use the jQuery outerWidth function to retrieve the width inclusive of padding, borders and optionally margin as well (if you send true as the only argument to the outerWidth method).
Tested Solution: Find height of a div and use it as margin top of another div.
$('.topmargindiv').css('margin-top', function() {
return $('.divheight').height();
});