Develop Reference

Stretch div to the top of other variable height div without using absolute positioning

I have two divs stacked vertically. I'm attempting to stretch the lower div to the top of the upper div when a button is clicked. This works well when the bottom div uses absolute positioning, updating the top property of the lower div as needed.
The issue comes when the top div is a variable height. I'd like the lower div to sit at the bottom of the top div when not stretched. How can the below code be updated so that the bottom div will always sit below the top div, even if it's height changes?
Example using absolute positioning

Maybe one of the option is not to expand blue div, but to collapse red div.
Here is one way how to do it.
https://codepen.io/anon/pen/yrzBja
Trick is to make wrapper's background blue.
The only problem is that max-height needs to be set to some arbitrary value (in my example 100%) so transition looks a little bit delayed.
I hope You get some inspiration from it to improve Your solution further.

For this case you should avoid using position: absolute as make elements stop affect one to each other. Instead I recommend you to use flexbox combined width min-width and max-width for both elements.
If your component is always going to have a fix height (300px in your example), then can happen that content overflows the container.
I little more of design context would have help, so hope this solutions works for you.
document.querySelector('.toggle').addEventListener('click', function() {
document.querySelector('.wrapper').classList.toggle('expanded');
});
body {
margin: 10rem;
}
div {
width: 12rem;
}
.wrapper {
display: flex;
flex-flow: column nowrap;
align-items: stretch;
height: 300px;
position: relative;
}
.stationary {
min-height: 50%;
max-height: 100%;
transition: min-height 1s, max-height 1s;
background: red;
overflow: auto;
}
.expanded .stationary {
max-height: 0;
min-height: 0%;
}
.expanding {
flex: auto;
bottom: 0;
height: 100%;
max-height: auto;
background: blue;
transition: max-height 1s;
}
.expanded .expanding {
max-height: 100%;
transition: max-height 1s;
}
<button class="toggle">Toggle</button>
<div class="wrapper">
<div class="stationary">
Random text that makes this a variable height div....
Random text that makes this a variable height div....
Random text that makes this a variable height div....
Random text that makes this a variable height div....
Random text that makes this a variable height div....
Random text that makes this a variable height div....
</div>
<div class="expanding">
Random text that makes this a variable height div....
Random text that makes this a variable height div....
</div>
</div>

How calculate div background image size on resize window

i have some problem which i can't figure out.
so
i have a div with background image.
<div class="a"></div>
and i want to make clickable some point of this background image. It's okey i can make this with adding to some div width z-index and make it clickable and positioning this with position:absolute e.g,
<div class="b">
<a class="clickablePoint" href="#"></a>
</div>
but how i can keep this clickable point on the same way when i resize the window if my background-image must be a responsive so background-size:100% auto.
maybe have some method to calculate background image height realtime when resize window ? or any other method? :(

Here's a minimal viable solution showing how to absolutely-position an element based on a full-width (background-size: 100% auto) background.
I'm setting the font-size of the element to 1vw (1/100th of the width of the viewport) and then calculating its left/top position and width/height size in em units, which become equivalent to a multiple of that 1vw.
As such, resizing this demo to any size will keep the box in the same place around the cat's nose.
body {
background: url('https://i.imgur.com/sVz3YRx.jpg');
background-size: 100% auto;
height: 50vw; /* for stack snippet height */
position: relative;
margin: 0;
}
.nose {
border: 1px solid yellow; /* for demo */
position: absolute;
font-size: 1vw;
top: 27em;
left: 59em;
width: 6em;
height: 5em;
}
<a class="nose"></a>

why the background image not display completely?

Could you please tell me why my background image not display completely .It only display upto the contend why ?I have only header in that so it display only small part of background image
Here is my code
.button-bar {
padding:3% 20% 3% 20%;
}
#wrapper{
background-image: url(/login);
}
Actually I got the answer but
when I am trying to give margin to my header tag my background image come down .but my header title remain on same position on top .
see this
.headerTitle{
margin-left:2%;
margin-top:2%;
}

Try with this:
.button-bar {
padding:3% 20% 3% 20%;
}
#wrapper{
background-image: url("http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif");
min-height: 500px;
}

Because the element with the background is only as high as the elements inside it. So in you wrapper there is only an h4-element with X amount of pixels high, so therefore the wrapper is also X amount of pixels high.
Try adding a min-height to your wrapper and see that the background follows. Like this:
#wrapper{
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
min-height: 250px;
}
https://jsfiddle.net/0tnjznt5/

Your css is doing exactly what you are telling it to do....
#wrapper is just that small slither showing with the background. If you want it to take up the entire page use .ionic-scroll in your css instead of #wrapper
See image:
http://screencast.com/t/l1ptRRNaDs
Try replacing #wrapper in your css with .button-bar, then try .ionic-scroll and see the results
.ionic-scroll {
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
If you want the full image to display inside #wrapper and you know the image height you can set #wrapper height and width like so:
#wrapper{
height: 1000px;
width: 1000px;
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
If you don't know the height and width of your image I would suggest using an <img> tag inside #wrapper instead... This will cause #wrapper to adjust to the size of the image

How to make a fixed div/nav resize with the div it's inside of?

I'm pretty fresh to web development and cannot figure this one out. Appreciate any help!
On re-size the fixed div moves out of the container instead of re-sizing. The site I'm working on has the nav as the fixed section and is inside of the main container.
Any help is appreciated. Thanks!
<div class="container">
<div class="fixed"></div>
</div>
.container {
border: 1px solid;
max-width: 600px;
width: 100%;
min-height: 1600px;
}
.fixed {
max-width: 600px;
width: 100%;
height: 50px;
border: 1px solid green;
position: fixed;
}
http://jsfiddle.net/KqvQr/

When you specify position as fixed the Element, even thought it is inside a parent container, It won't behave as a child of a parent container. It won't adjust his width according to the parent width. But I can give you a solution where when user resize the page the fixed element also get resize yet it is a position fixed
.fixed {
height: 50px;
border: 1px solid green;
position: fixed;
right:0;
left:0;
}
Don't specify widths for the container. instead of that specify left and right values. so then when page is resizing css only check for the left and right margin values. by keeping those values it will adjust its inner width always.
Here is the working fiddle http://jsfiddle.net/KqvQr/5/

I don't think you can achieve what you want if you stick with that constraints. Your width and max-width will work as expected if you change your position to relative instead of fixed..
Check out this Fiddle

Scrolling div without fixed height

I need to build a dynamically-resizing scrolling div.
The div should dynamically resize to fit the screen. But if the content doesn't fit on the screen, it should display a scrollbar. So the browser's own scrollbar should never need to become active.
I can get a scrollbar to appear in the div by placing another div inside it and using overflow: auto.
<div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" >
<div id="gridcontent" style="height:100%">
<!--Put loads of text in here-->
</div>
</div>
The trouble is that this only works when the first div has a fixed height. I had hoped I could just set the first div to height:100%, but sadly not- this property appears to get ignored, and the scrollbar just doesn't appear.
I have tried putting the divs in a table with height:100%, and setting the first div to height:auto, hoping it might take its height from its parent. But the div still seems to ignore the height property.
So my question is: Can this be done using just html, or- failing that- javascript?

You could stretch the div using absolute positioning. This way it will always take the size of the browser window (or the closest positioned ancestor).
Given this HTML:
<div id="gridcontainer"></div>
the CSS should be something like:
#gridcontainer {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}
Live Demo

Since IE9 you can use viewport units.
Let's say that the height of your container is dynamic, unless its size is greater than the window height. In that case we stop the expansion & activate the scroll.
#container{
background: #eaeaea;
max-height: 100vh;
overflow-y: scroll;
}
div{
outline: 1px solid orange;
width: 200px;
height: 200px;
}
<div id='container'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

If you are trying to make element fit the screen then you can set the value of hight and width of the element to 100%.
You will also need to set the height of html and body
html, body {height: 100%}
#gridcontaine {
height: 100%;
width: 100%;
}