We Keep Coding

How to resize bottom fixed div when top div is collapsed?

I have two divs, one on top, the other on the bottom. I need to have the bottom div fixed, and to resize and occupy the space above when the div on top is collapsed. Links to the scenarios below. Is this possible to accomplish using only CSS? This is for an angularJS application.
UPDATE: Support for older versions of browsers, specifically IE, must also be considered.
Div1 expanded
Div1 collapsed

Yes, you can do this using flex. See snippet below.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("max-height", "50px")
});
});
body, html {
margin: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.box {
flex-grow: 1;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->
Update
Since you noted in the comments you wanna support older browsers, the same as above can be achieved using the old fasion table layout.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("height", "50px")
});
});
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
height: 100%;
width: 100%;
}
.row {
display: table-row;
width: 100%;
}
.box {
display: table-cell;
color: #fff;
vertical-align: middle;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="box" id="div1">
<strong>div1</strong>
</div>
</div>
<div class="row">
<div class="box" id="div2">
<strong>div1</strong>
</div>
</div>
</div>

You can try this.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow;
}
.content {
display: table-row;
/* height is dynamic, and will expand... */
height: 100%;
/* ...as content is added (won't scroll) */
background: yellow;
}
.footer {
display: table-row;
background: grey;
}
<div class="wrapper">
<div class="content">
<h2>Content</h2>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>

you can try this it works fine for me
<div class="wrapper">
<div class="container">
<div class="top-div">
topd div
</div>
<div class="bottom-div">
bottom div
</div>
</div>
</div>
CSS
.wrapper{
float:left;
height:100%;
}
.container {
position:absolute;
display: block;
float: left;
width: 100%;
height: 100%;
min-height:100%;
}
.top-div {
margin: 5px;
float: left;
position: fixed;
top: 0;
width: 90%;
height: 30%;
background-color: red;
}
.bottom-div {
margin: 5px;
position: absolute;
float: left;
bottom: 0;
width: 90%;
background-color: green;
}
use jQuery
$(function() {
var containerH = $(".container").height();
var topdivH = $(".top-div").height();
$(".bottom-div").height(containerH - topdivH);
});
check out jsfiddle

apply same jquery function to element present inside parent div

code jsFiddle
I applied jquery's click function to 'li#info' element. But when I click, it perform jquery to element of different parent also ('#theme div#info-overlay').
I want, whenever 'li#info' is clicked on the parent element('#theme') then it perform function to its child element only(div#info-overlay).
Like in the code, by clicking on 'Fe' it open overlay on both the block. But i want it to show overlay only to the block for which 'Fe'is clicked.
sorry, I am new in jquery.

I got your point. you just need to change one line of code
because both divs have same ids thats why both are appearing on click
and it's not a good practice to use same id multiple time on a single file.
it will make issue somewhere sometime.
i have change this line
$("div#info-overlay").toggle('100');
into this
$(this).parents('#theme').find("#info-overlay").toggle('100');
check this
JS Fiddle

use this to find div $(this).parents('#theme').find("#info overlay").toggle('100');
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
$(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
// $("div#info-overlay").toggle('100');
});
});
/*
theme block
*/
.theme{
width: 100%;
height: 250px;
background-color: #fff;
margin: 20px auto;
}
.theme .header{
width: 100%;
height: 200px;
position: relative;
background-color: #eee;
}
.theme .header *{
display: none;
}
.theme .header .overlay{
position: absolute;
background-color: #fff;
left: 60px;
top: 10px;
width: 83%;
height: 180px;
z-index: 80;
}
.theme .header .about{
position: absolute;
left: 10px;
top: 10px;
}
.theme .header .about li{
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #FED200;
opacity: .5;
color: #fff;
padding: 5px 10px;
margin: 5px 0;
}
.theme .footer{
width: 100%;
height: 50px;
padding: 0 20px;
}
.theme .footer .left{
width: 85%;
display: inline-block;
overflow-y:hidden;
height: 50px;
float: left;
padding: 10px 0;
}
#media screen and (min-width:620px) {
.theme{
width: 70%;
}
}
#media screen and (min-width:720px) {
.theme{
width: 49%;
display: inline-block;
}
}
#media screen and (min-width:920px) {
body .container.theme-holder {
width: 70%;
}
}
#media screen and (min-width:1024px) {
body .container.theme-holder {
width: 95%;
}
.theme{
width: 32%;
}
}
#media screen and (min-width:1200px) {
body .container.theme-holder {
width: 85%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate sdfsfdsfdsfsd</p>
</div>
</div>
</div>
</div>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate dfsasdfdsafs</p>
</div>
</div>
</div>
</div>

scroll to link id with fixed nav bar

in my web i have a fixed navigation bar and below it i have some another divs - the nav bar links connect to those links.
the problem is when i click on some link the fixed nav bar covered the begining of the div. and what i want and tring to do is that the nav bar will be at the start of the div and so it wont covered the begining.
here is the link for the result.
here is my html code:
<body>
<div id="header">
<div id="nav_bar">
<ul>
<li>בית</li>
<li>מי אנחנו</li>
<li>מוצרים</li>
<li>צרו קשר</li>
<li><img src="1.png"></img></li>
</ul>
</div>
</div>
<div id="main_pics" class="container">
<!-- photos here -->
<div id="main_photo1" class="phocont first">
</div>
<div id="main_photo2" class="phocont">
</div>
<div id="main_photo3" class="phocont">
</div>
<div id="main_photo4" class="phocont">
</div>
<div id="main_photo5" class="phocont">
</div>
</div>
<div id="about_us" class="container">
<h1>עץ כנעני - כשעיצוב ואיכות נפגשים</h1>
<p> וייצור המוצר.</p>
<p>א.</p>
</div>
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
</div>
<div id="connect_us" class="container">
<h1>תאמו איתנו פגישה עוד היום</h1>
</div>
<div id="down_nav_bar" class="container">
</div>
<div id="credit" class="container">
</div>
</body>
here is my css code:
body{
background-color: white;
margin: 0px;
padding: 0px;
}
#nav_bar{
background: rgba(255,255,255,0.9);
height: 55px;
position: fixed;
width: 100%;
top: 0;
left: -2px;
z-index: 2;
}
#nav_bar ul{
padding: 0px;
text-align: center;
direction: rtl;
}
#nav_bar ul li {
display: inline-block;
padding: 0 10px;
color: gray;
float: inherit;
font-family: "alefregular";
font-size: 23px;
}
#nav_bar ul li a{
color: inherit;
text-decoration: none;
}
#nav_bar ul li a:hover{
color:#a51212;
}
#nav_bar img{
height:18px;
position:absolute;
padding-right:20px;
top:25px;
z-index:-1px;
}
#about_us{
text-align: center;
/*height: 250px;*/
height: 100%;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color:gray;
}
#about_us p{
width: 55%;
margin: auto;
text-align: center;
direction: rtl;
padding-bottom: 10px;
line-height: 30px;
}
#our_services{
/*height: 450px;*/
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
}

Try adding padding top to container
.container
{
padding-top: 55px;
}
fiddle
If you do not wish to have the text move down by 'x' pixels, you can programmatically scroll with an adjusted offset using jQuery:
$('html, body').animate({
scrollTop: $(target).offset().top - 55
}, 1000);
Notice, this example does not use padding-top:
fiddle
Or, without jQuery:
window.scrollTo(0, document.getElementById(targetSection).offsetTop-55);
fiddle

The easiest way by far would be to add some padding (as much as the navbar is high) to the divs that serve as targets for your links:
div.container{ padding-top: 55px; }
For the sake of semantics, I'd recommend you also use section elements instead of those meaningless divs, etc… https://html.spec.whatwg.org/multipage/semantics.html#sections

CSS overlay div with another div

Goal: I am trying to move divs ( blue + green ) above banner ( red ).
Purple div have different amount of content, so its height is variable.
Consider header (yellow) and banner ( red ) with fixed height so you can use fixed position.
My try is in jsfiddle.
JsFiddle: http://jsfiddle.net/dEb3m/
This is final output.
Banner is in background. News (green) is relative to main ( orange )
HTML:
<div id="header">header</div>
<div id="banner">banner</div>
<div id="search">search</div>
<div id="news">
<div class="new_item">new 1</div>
<div class="new_item">new 2</div>
<div class="new_item">new 3</div>
</div>
<div style="clear: both;"></div>
<div id="main">main</div>
<div id="footer">footer</div>
CSS:
#header, #banner, #main, #footer {
width: 400px;
}
#banner {
height: 100px;
}
#search {
width: 100px;
float: left;
}
#news {
display: inline-block;
width: 300px;
}
.new_item {
display: inline-block;
float: left;
min-height: 100px;
width: 150px;
max-width: 150px;
}

When do you to move the divs ( blue + green ) above banner ( red )?
If it is always, you can use the following CSS code:
#banner {
margin-bottom: -50px;
}
Here is a jsFiddle to play with.
If it is just when you scroll, you can use the following CSS code:
#banner {
position: fixed;
z-index: -1;
}
#search,
#news {
margin-top: 100px;
}
Here is a jsFiddle to play with.
Cheers,
Thomas.

Solution:
JSFiddle demo
CSS:
#header, #banner, #main, #footer {width: 400px;}
#header {background-color: yellow;}
#banner {background-color: red;height: 50px;position:absolute;z-index:-1;}
#search {background-color: blue;width: 100px;float: left;margin-top:20px;}
#news {background-color: green;display: inline-block;width: 300px;overflow:hidden;white-space:nowrap;margin-top:20px;}
.new_item {
vertical-align:top;
white-space: normal;
background-color: pink;
display: inline-block;
min-height: 100px;
width: 150px;
max-width: 150px;
}
#main {background-color: orange;}
#footer {background-color: silver;}

div to fill up the remaining space (width)

hey there i have a div with 100% width (the width of computer screen can be anything) inside this width i have two child divs one with fixed width say 50px and i want the other child div to take up the remaining (100%-50px) space can anyone tell me how do i achieve this please ....
I have done like
<div style="width:100%;min-height:90px;">
<div style="float:left;width:50px;height:60px;">
</div>
<div style="float:left;width:90%;height:60px;">
</div>
</div>
in this code if 50 px is not the 10% of screen the there are some left blank space which I do not want

jsFiddle
Only float the fixed width element.
CSS:
.container {
height: 10px;
width: 100%;
}
.right {
background: red;
height: 10px;
}
.left {
background: blue;
width: 50px;
height: 10px;
float: left;
}
HTML:
<div class="container">
<div class="left">
</div>
<div class="right">
</div>
</div>

You could use a table layout:
HTML:
<div class="container">
<div class="fixed-width"></div>
<div class="fluid-width"></div>
</div>
CSS:
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.fixed-width {
display: table-cell;
width: 50px;
}
.fluid-width {
display: table-cell;
}
http://jsfiddle.net/myajouri/zJq8N/
OR...
You could use width: calc(100% - 50px) which is not supported in IE8 and below.
.container {
width: 100%;
}
.fixed-width {
float: left;
width: 50px;
}
.fluid-width {
float: left;
width: calc(100% - 50px);
}
http://jsfiddle.net/myajouri/mTq6x/