Develop Reference

How to set height in CSS from JavaScript Variable?

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.

The height of the menu is not correct CSS

I'm working in a home page, it's working correctly, but the menu on the left sidebar, it's not making and overflow correctly. I need the scrollbars on the menu, 'cause I don't want it on the page.
I think the issue it's with the height, but I need the 100% of the height not in pixels, somebody can help me?
Here you are de JsBin: http://jsbin.com/ceyij

It is because you have only given 99% height to your html.Just make it 100%

In ceyij.css, you have given height:99% !important in html and body tag
and also give overflow:hidden so
just remove height 99% and give overflow:auto instead of hidden
it not proper look like

In order for an element to have 100% height, the parent element that wraps it must also have either a fixed or percentage height.
So with that in mind you will need 100% heights on both the HTML and BODY tags like this:
html, body
{
height:100%;
width:100%;
}
For the particular list items
#menu_panel {
height:100%;
position: absolute;
left: 0;
top: 0;
overflow:hidden;
}

I've got the best result with the following thanks to jQuery
$(document).ready(function() {
// Handler for .ready() called.
var alt = $(".wrapper").height();
$(".left-side").height(alt);
$(".sidebar").height(alt - 153);
var altHeader = $("header.header").height();
$(".sidebar-menu").height(alt - 153);
});

Background-image resize after window-size

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;
}

css animation moves page - fix page scroll position on current element with css?

Given the following simplified problem:
foreach i in 1..100 do
<div onclick="$("div").attr('class','expand');">block i</div>
And this css:
div {
height: 20px;
transition: height 0.5s;
}
div.expand {
height: 50px;
}
Now when I click on a div, every div get's the class "expand". This means that the page will expand. However, everything will scroll down. That means that if I click on div 50, it will probably not be in my window anymore and I have to scroll down to see it again.
I would love to make the div that I clicked on stay in the center of the screen. Is this possible with CSS, or do I need JS?

it is possible ... you can use jQuery's .scrollTop() method like this:
$(window).scrollTop( $('.your_element').offset().top + $('.your_element').height() - $(window).height() );

This function scrolls the page according to the position of mouseclick:
$(document).ready(function(){
$('div').click(function(e){
var offsetY = e.pageY - $(window).scrollTop();
$('div').attr('class','expand');
$(window).scrollTop($(this).offset().top-offsetY);
});
});
Example on jsFiddle

How to set div height to 100% of user's monitor resolution?

height: 100% in CSS obviously doesn't work. So is there any other CSS or JavaScript/jQuery solutions to this problem? Please advise.

'Let's say your problem element is a <div>. If you make sure your <div>s height has something to reference to, almost all your problems will disappear:
#my_div
{
height: 100%; /* Won't work. What is 100% of an unknown/unset value? */
}
Make sure the <div>'s parents have a set height too. I usually do this (well, not exactly, but you get the idea):
#my_div, #parent_of_the_div, body, html
{
height: 100%; /* This works, but it will show scrollbars if the body
or html elements have padding or margins. */
}

So you want a div to be the height of the screen? It's kind of non-obvious, but css height is the correct approach. The trick is you need to have the html and body elements also take up the full height of the page, otherwise the div is taking up 100% of nothing. The best way I've found to do this is:
html {
height: 100%;
}
body {
height: 100%;
}
#contentDiv {
min-height: 100%;
}

No Javascript required,becouse CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
so you can write it on your style :
#contentDiv {
height: 100vh;
}

With jQuery, you could use:
$('div.class').css('height', $(window).height()+'px');

Pure css
#container {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
Good Luck
Or javacript Jquery:
Ready (not innerHeight in ie8):
$(document).ready( function(){
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});
resize window :
$(window).resize(function() {
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});

There are a few options you may find useful:
vh (viewport height)
vw (viewport width)
vmin (viewport minimum length)
vmax (viewport maximum length)
#container{
height: 100vh;
background: black;
}

My answer builds on jonwayne's because there wasn't much explanation.
You cannot use css to get the value of a users monitor, but you can do it via javascript. So the trick is to add javascript to the page load event which will set the height based on the browser window height. Using jQuery, you can do this with the following snippet
// jquery shorthand for onLoad event
$(function() {
// Set the css height property of #div_to_resize to the css
// height property of the browser window
$('#div_to_resize').css('height',$(window).css('height'));
}
You can also optionally attach to the resize event of the browser to reset the height if the window is resized. Combined with the previous snippet it would be
// We extracted this to a function since we reference it more then once
function matchHeight() {
$('#div_to_resize').css('height',$(window).height);
}
// jQuery shorthand for document.onload
$(function() {
matchHeight();
//On the resize event, call matchHeight()
$(window).resize(matchHeight);
});

I don't think you can get the monitor's resolution with any web technology. What you an do is use Javascript to get the browser's height and set the height property of div in the css. This post might help for getting the height.