So, I am using the Slick slider and wanted to apply some code only when the slider is active.
.specialist-description-wrapper {
height: 0rem;
}
.slick-current.slick-active .specialist-description-wrapper {
height: 20rem;
}
But the problem is, I don't want to have a fixed height. I want an "Auto" height so if my content gets bigger then it'll fit automatically. If I try to make height from 0rem to Auto then "Transition" doesn't work.
So, I have decided to use JavaScript to calculate the height of the element.
let descriptionWrapper = document.querySelector(".slick-current.slick-active .specialist-description-wrapper")
let height = descriptionWrapper.offsetHeight
descriptionWrapper.style.height = height;
But it's not working for me. Did I miss something?
Keeping the height to auto will only take height used by itself and will not take full height.
To make the height responsively adjust according to the parent's height, you can use
height: 100%;
This will make the element take all the height of its parent element.
But still, if anything breaks, you can adjust the content of the element. Because the 100% height is important.
Also, you have not provided enough code regarding your markup. Please always provide the code so that everyone can write better answers for you.
Related
I'm trying a more fluid design.
I want specific divs to be a percentage of the overall body. I also want to set fluid / liquid padding within each div.
<body>
<div class='image'></div>
<div class='fourty'></div>
<div class='sixty'></div>
</body>
CSS:
body {
margin-top: 85px;
min-height: 100%;
}
.image {
content: image_url('something.jpg');
width: 100%;
height: auto;
}
/*I'm assuming the padding I'm setting is a percentage of the .fourty
div not the overall body. Granted, width is 100%.*/
.fourty{
padding: 4% 8%;
min-height: 40%;
width: 100%;
}
.sixty{
padding: 4% 8%;
min-height: 60%;
width: 100%;
}
The problem I'm having is that the percentage height does not seem to take effect for these divs. It seems to just be an auto height based off the contents of the div.
How do I correct / achieve this? I'm open to a JS solution, but would be more interested as to how to accomplish this in CSS.
As far as CSS goes, there are no styles that you can apply to make an element's height equal to a certain percentage of the total document (body) height.
CSS does, however, offer you options to style an element's heights to a certain percentage of the viewport height (using VH units), but since this does not achieve your goal, I'll leave you with a javascript answer that does.
Relevant javascript functions:
function getDocumentHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight);
};
function setDivHeight(target, percentage) {
var desiredHeight = getDocumentHeight() * (percentage/100)
target.style.height = desiredHeight + 'px';
};
To set the height initially and on viewport resizes:
var targetDiv = document.getElementById('target');
setDivHeight(targetDiv);
window.addEventListener('resize', setDivHeight.bind(null, targetDiv))
The problem I'm having is that the percentage height does not seem to take effect for these divs. It seems to just be an auto height based off the contents of the div.
That is correct. The reason is that your code is in violation of the spec.
From the W3C height property definition:
percentage Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's
containing block. If the height of the containing block is not
specified explicitly and this element is not absolutely positioned, the value computes to 'auto'.
auto The height depends on the values of other properties.
In other words, if you're going to use percentage values, you'll need to use the height property from top to bottom.
From the browser's perspective, min-height (and max-height) don't adhere to this rule and, therefore, as the spec says, they compute to auto.
DEMO (with your code, revised)
Read more here: Working with the CSS height property and percentage values
As an aside, I think its safe to say that the height definition is thoroughly obsolete. It hasn't been updated since 1998 (CSS2) and there are many ways for establishing the height of a box. Confining percentage heights to only the height property doesn't make much sense anymore.
Firefox seems to agree. Recent versions now accept flex heights, as well. See examples here:
Height is not correct in flexbox items in Chrome
Chrome / Safari not filling 100% height of flex parent
Flexbox in Chrome--How to limit size of nested elements?
I'm trying to set the height of a button as a % of the user's window. It seems this works :
#mybutton {
padding: 10%;
}
But obviously doesn't quite achieve what I need (in addition, it's not responsive to the browser's size).
This doesn't work :
#mybutton {
height: 10%;
}
I've also tried doing it with javascript (I really don't master it), but none of those two tries work either.
document.getElementById('mybutton').style.height = "10%";
document.getElementById('mybutton').style.height = window.outerHeight / 10;
How can I do that ?
PS : I've also tried with fixed values (100px) to see if I could change the height, and it seems I can't at all.
NB : I'd like it to be responsive to the user's window, meaning that if I reduce the size of my browser, the button should keep a height of 10% of it.
Thanks.
You can use viewport units:
#mybutton {
height: 10vh;
}
Viewport-relative lengths are supported by all modern browsers.
Though the answer has been selected I wanted to note three things here.
Note #1
#mybutton {
height:10%;
}
does not work because the height is relative to the parent and the parents, html and body, are not 100%. Checkout this fiddle, http://jsfiddle.net/3sLafksx/1/
Note #2
The reason padding worked is because padding is not relative to the parent's height but to the parent's width. Which in case of a div element or plainly in the body is 100% of the window size.
Refer: https://stackoverflow.com/a/8211457/1799502 and http://www.w3schools.com/cssref/pr_padding.asp
Note #3
Using the viewport height vh and viewport width vw units is a very good idea but #rnevius was not kidding when he said all modern browsers, you need at least IE9 or Android 4.4
IF your element is a span, it won't work like you wish, but using a div, your code will work.
document.getElementById('b').style.height = (window.outerHeight / 10) + 'px';
Using css, your button will be X% of your parent container, so if you have a parent container with 300px height, your button'll be 30px height (using height: 10%).
You can also use the vh unit like #rnevius pointed out. But remember that a span won't work as you want, because it isn't a block element. (unless you force it by using display: (inline-)block).
Try putting a !important
#mybutton {
height: 10% !important;
}
This has to be the most simple case of css issue. But I could nt find a solution to this problem..
I have a main div which has min-height of certain value. Ive given the min-height in in % so there is no outer div and it will not show the min-height. if I give min - height in px , it will show up.
but I am trying to get the min-height to be 50% of window height and it could vary in each devices, so giving height in px is not an option for me... if I give jquery.css() function, and keep it document.ready() function, when the page starts loading, it will have zero height and it will come down to height that Ive specified and that doesnt look good in website..
Case 1 : http://jsfiddle.net/pT56y/
FIDDLE EXAMPLE
case 2 : http://jsfiddle.net/pT56y/2/
Is there a proper way to deal with this issue?
in order to use a percentage height, the parent must have a set height (either in pixels or %):
body,html{
height: 100%;
}
.container-fluid{
background:#000000;
width:100px;
min-height:50%;
}
Fiddle
I'm pretty new to web-development and web-design, and I'm working on a website for a company right now(www.momentium.no). They want to have the background image(s) at the top recognize the browsers window-size, so that the image(s) fills the whole screen and don't show the content below before you scroll down when you load the website.
Could anyone of you check this out? Would be great to get a little bit of help!
Thanks,
Yngvar
Setting the height to 100% using CSS will work, but you'll have to revise your HTML structure in order to maintain it's flow when the window is resized.
Otherwise, you can try the following code snippets:
JS:
var $imageWrapper = $('#background-image'),
$contentSpacer = $('section#wrapper > header'),
// Some buffer value, adjust this to get the rest of the content aligned properly
buffer = 200;
// Set the div height on pageload
$(document).ready(function() {
var windowHeight = $(window).height();
$imageWrapper.height( windowHeight );
$contentSpacer.height( windowHeight );
});
// Change the div height on window resize
$(window).resize(function() {
var $this = $(this),
thisHeight = $this.height();
// Set the height of the image container to the window height
$imageWrapper.height( thisHeight );
$contentSpacer.height( thisHeight - buffer );
});
CSS:
#background-image {
background-size: cover;
// Change this to the minimum height your page will support
min-height: 600px;
}
The rest of the code you have seems correct, so adding these should fix things up. A couple of things to keep in mind here:
The JS isn't placing any limitation on the height being applied here, so the CSS will still apply even if the window is resized to 10px height. Most designs have a minimum height/width before breaking, so using a min-height on your #background-image div might be a good idea.
Check the browser support before implementing, if you need to support one of the unsupported browsers, you'll need to either write a fallback or restructure your code in such a way that it degrades gracefully. IE9+, Chrome21+ and FF26+ should be good enough though.
Looks like you're using a spacer in the main section to ensure that the page content comes in after the main slider. The structure of the page can be modified so that you don't have to modify two element heights. As I mentioned at the beginning, you can probably use the pure CSS solution if you restructure.
You can have 2 solutions :
As Pete says, you can use "background-size" css3, but it will not be compatible for older browser
You can use javascript with $(window).height() and $(window).width
The Only Way is create a repponsive design for your company..all the problem will be solved by responsive design...
Change the image size depends upon the browser window size Other wise
change the image to another one also possible
You can set the height of your "background-image" div to 100%, it will work.
Check this code:
#background-image {
width: 100%;
height: 100% !important;
position: absolute !important;
overflow: hidden;
text-align: center;
background: #000;
}
I'm trying to use this plugin Galleria in its responsive mode, which basically means it will re draw itself based on its container size as the window re-sizes. The demo on the link I've provided shows a really good example. You can see that, as you resize your window, the whole gallery adjusts accordingly. Now my issue is, the plugin won't let me initialize the gallery unless a height has been specified for the DOM element that is used as its container. This means, I've had to write a whole lot of javascript code to respond window resizes - it destroys the point of it having a responsive mode quite a bit - but in the website above, nowhere can I find an explicit height specified. Can someone explain to me where I'm going wrong?
I figured it out by myself. Posting my answer -
When initializing the gallery - specify your height in percentages - as below. I'm guessing it takes 50% of window height as its value in this case. This way, you don't need to explicitly specify heights anywhere and it works as advertised
Galleria.run('#gallery', {responsive:true, height:0.5, debug:false});
Galleria needs a height to initialise correctly. You can do this either via CSS or JS.
If you would like it to fill the width and height of the screen, I would recommend setting a width and height of 100% via CSS. And its parent container needs to be 100%. See below.
**JS:**
Galleria.run('#galleria', {
responsive:true,
showCounter:true,
thumbnails:false,
trueFullscreen:true,
});
**CSS:**
#galleria{
width:100%;
height: 100%;
position: fixed;
z-index: 9999;
top:0px;
bottom: 0px;
}
body,html{
height:100%;
width:100%;
}
The height option ( if it's < 2.0) is relative to the width of the container. So height:0.5 would have a height that is half the width of the container (w=2, h=1).
height:1.5 would result in (w=2, h=3)
To keep it responsive you can use max-width rather than width when styling the container.
If the height option is set to 2.0 or more, it is interpreted as pixels. So height:2.0 will only be 2px tall.