Develop Reference

Height 100% not working for nested div

I was tried to make child div take height 100% but it's not working, so I'd like to know why it is not working:
I give html, body height: 100% then .hero height 100% and .hero-image must be 100%:
html, body{
height:100%;
}
.hero{
width:100%;
height:100%;
border:1px solid #0094ff;
.hero-image{
width:100%;
height:100%;
background-image:url('../images/1.jpg');
background-size:cover;
}
}
<section class="hero">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="hero-image">
Hello
</div>
</div>
<div class="col-lg-6">
<div class="hero-content">
<h1>Hey, I Am Mike Ross</h1>
<p>
Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.
</p>
</div>
<div class="skills">
</div>
</div>
</div>
</div>
</section>

Height 100% is a very elusive issue, and normally creates more problems than it solves. However, to answer your question:
Basically, every container between the html element and the element you want to be 100% must have height: 100%; on it.
So, in your case, this means the following CSS must be added:
/* These styles get all of the containers to 100% height */
/* address ONLY sub-elements of .hero element to prevent issues with other pages / code */
.hero .container-fluid,
.hero .row,
.hero [class*="col-"] {
height: 100%;
}
Below is your code, built into a snippet, so you can see it work. Note that I've additionally added col-sm-6 classes to your col-lg-6 elements so you can see it work in a narrower window. (NOTE: click the "Expand Snippet" link in order to get a wide enough window to see it working).
html,
body {
height: 100%;
}
.hero {
width: 100%;
height: 100%;
border: 1px solid #0094ff;
}
.hero-image {
width: 100%;
height: 100%;
background-image: url('http://via.placeholder.com/500x100');
background-size: cover;
}
/* These styles get all of the containers to 100% height */
.hero .container-fluid,
.hero .row,
.hero [class*="col-"] {
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="hero">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-sm-6">
<div class="hero-image">
Hello
</div>
</div>
<div class="col-lg-6 col-sm-6">
<div class="hero-content">
<h1>Hey, I Am Mike Ross</h1>
<p>
Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.
</p>
</div>
<div class="skills">
</div>
</div>
</div>
</div>
</section>

.hero-image is not taking 100% of a parent because container-fluid, row and col-lg-6 height is not 100%
html, body{
height:100%;
}
.hero{
width:100%;
height:100%;
border:1px solid #0094ff;
}
.heroFullHeight{
/*height: inherit;*/
height:100%;
}
.hero-image{
width:100%;
height:100%;
background-image:url('../images/1.jpg');
background-size:cover;
background-color: red;
}
<section class="hero">
<div class="container-fluid heroFullHeight">
<div class="row heroFullHeight">
<div class="col-lg-6 heroFullHeight">
<div class="hero-image">
Hello
</div>
</div>
<div class="col-lg-6">
<div class="hero-content">
<h1>Hey, I Am Mike Ross</h1>
<p>
Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.
</p>
</div>
<div class="skills">
</div>
</div>
</div>
</div>
</section>

How to set image height to other part of div with same class names

I have these 3 container divs and inside it textdiv is floated left and image div is floated right. I want to set the height of the image as per the height of the text. Is there anyway to do this using jQuery? Or should I give different class names to each div and set the height?
<div class='containerr'>
<div class='textdiv'></div>
<div class='imagediv'></div>
</div>
<div class='containerr'>
<div class='textdiv'></div>
<div class='imagediv'></div>
</div>
<div class='containerr'>
<div class='textdiv'></div>
<div class='imagediv'></div>
</div>

try using this snippet
$('.containerr').each(function(){
$this = $(this);
var textHeight = $this.find(".textdiv");
var imageHeight = textHeight.height();
$(".imagediv").css("height", imageHeight);
});

CSS3 Flexbox can help with difficult layout challenges that were once difficult or impossible with floats alone:
.container {
display: flex;
flex-wrap: wrap;
}
.textdiv, .imagediv {
display: flex;
}

HTML
<div class="containerr">
<div class="textdiv"><p>Smapmle text.</p></div>
<div class="imagediv"></div>
</div>
<div class="containerr">
<div class="textdiv"><p>Smapmle text.</p><p>Smapmle text.</p></div>
<div class="imagediv"></div>
</div>
<div class="containerr">
<div class="textdiv"><p>Smapmle text.</p></div>
<div class="imagediv"></div>
</div>
CSS
.containerr {
display:block;
width:100%;
border: 1px solid black;
position: relative;
}
.textdiv {
display: inline-block;
width: 50%;
border-right: 1px solid blue;
}
.imagediv {
position: absolute;
display:block;
right:0;
top:0;
width: 50%;
height: 100%;
background-color:red;
}

CSS full page height content

I'd like to build a website with a full height whatever the user's screen. Scroll is impossible, everything is shown in the page.
I tried something like :
<body>
<div class="header">
test
</div>
<div class="central">
test
</div>
<div class="footer">
test
</div>
</body>
html,body{
height:100%;
}
.header,.footer{
height: 20%;
background-color:blue;
}
.central{
min-height:60%;
background-color:red;
}
It works in my screen with a big resolution but not in my 15", page is scrollable. If body is limited to 100%, why all the elements aren't in the page?
JSFIDDLE
Thanks.

Because the body has built-in margin.
Just remove it.
A normal CSS Reset would generally have this as standard.
html,
body {
height: 100%;
margin: 0;
/* see? */
}
.header,
.footer {
height: 20%;
background-color: blue;
}
.central {
min-height: 60%;
background-color: red;
}
<body>
<div class="header">
test
</div>
<div class="central">
test
</div>
<div class="footer">
test
</div>
</body>

I think it's because the body has margins. Try :
html,body {
height:100%;
min-height:100%;
max-height:100%;
margin:0px;
padding:0px;
}

set min height to html tag and remove default margin, padding to body tag
html{
min-height:100%;
}
body{
padding: 0;
margin: 0;
min-height:100%;
width: 100%;
height: 100%;
}

Child div not resizing properly on change

i am using three div tags like this
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
css
#main
{
width:auto;
height:auto;
margin-left:-100px;
}
#content{
width:auto;
height:auto;
border:5px solid blue;
}
#sub
{
width:100%;
height:100%;
border:1px solid red;
}
so i kept everything auto. But even when i resize or change the margin of main parent the last child not adapting to it.
I am not sure what may be the problem. But when i set width and height as 100% in resize or margin change event it seems adapting.
Can anyone help me out in this? And also is there anyway to detect the parent div attribute changes in some event??
JSFIDDLE

Try This
$(document).ready(function() {
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
$('button').click(function() {
$('#main').css('margin-left', '0px');
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
});
});
#main {
width: auto;
height: auto;
margin-left: -100px;
}
#content {
width: auto;
height: auto;
border: 5px solid blue;
}
#sub {
width: 100%;
height: 100%;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
Working Demo

You are setting the width from JS. Try this.
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
#main
{
margin-left:-100px;
}
#content{
border:5px solid blue;
}
#sub{
display: block;
border:1px solid red;
}
$(document).ready(function(){
$('#sub').css('height',$('#content').height());
$('button').click(function(){
$('#main').css('margin-left','0px');
});
});
JSFiddle

make first section of the page stick at the top

At my Page there are tow sections, a header div and the contents div. I want JS or jquery solution to stick the header section at the top, so that when user scrolls the contents section would cross and cover the header section.
html:
<div id="header">
<h3>I'd like to stick here at the background, please! </h3>
</div>
<div id="content">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
http://jsfiddle.net/KNh46/

Update: misunderstood, so you want the content to scroll over the header, not under. Then it should be like:
#header {
position: fixed;
height: 100px;
top: 0;
z-index: 100;
}
#content {
position: relative;
margin-top: 100px;
z-index: 101;
}
See an example here: http://jsfiddle.net/aorcsik/v7zav/
If your header is fixed height, say 100px, then:
#header {
position: fixed;
height: 100px;
top: 0;
}
#content {
margin-top: 100px;
}
This way when scrolled to the top, the header won't overlay the content, but when you start to scroll down, it will.

Something like this, if I understand your question:
<div id="content_wrapper" style="position:relative">
<div id="header" style="z-index:1; position:absolute; top:0px">
<h3>I'd like to stick here at the background, please! </h3>
</div>
<div id="content" style="z-index:5">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
</div>

I'm using https://github.com/bigspotteddog/ScrollToFixed on my projects with no problems. ScrollToFixed allows you to set when the div will be fixed based on the scroll position.
fiddle with example: jsfiddle.net/ZczEt/167/

you should add css:
*{margin:0;padding:0}
#header{
position:fixed;
width:100%;
height:200px;
background:#ccc;
}
h3{
text-align:center;
}
#content{
background:#f1f1f1;
padding-top:200px;
min-height:500px;
}
jsfiddle

I myself came with another solution :
add another container div to the header and then position that div to fixed, and make the contents to be absolute. but this way you need to specify a min-height or height for the header:
http://jsfiddle.net/pna54/
<div id="header">
<div class="container">
<h3>I'd like to stick here at the background, please! </h3>
</div>
</div>
<div id="content">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
css:
div{margin:0;padding:0}
h3{
padding:0;margin:0;
padding-top: 100px;
padding-bottom:100px;
text-align:center;
}
#header{
background:#ccc;
min-height:200px;
width:500px;
position:relative;
}
.container{
position:fixed;
width:100%;
max-width:500px;
}
#content{
background:#f1f1f1;
min-height: 500px;
position: absolute;
width:500px;
}
http://jsfiddle.net/pna54/