Height 100% not working for nested div - javascript

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>

Related

How to display responsive 5 poker card images with correct aspect ratio?

I want to display 5 poker cards laid side by side with horizontal margin just like on a poker table. I tried this but I can't make it display:
I also want this to be responsive that is it preserves aspect ratio when resized.
.card {
width: 100%;
height: 100%;
background-size: cover;
}
.is2d .two.hearts {background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4=')}
<div class="poker is2d">
<div class="middle">
<div class="card two hearts"></div>
<div class="card two hearts"></div>
<div class="card two hearts"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>

As Armedin said, you do not have any content inside your div. Width and height 100% won't do anything.
I suggest you to put the image not as background, as it won't change the dimensions of the div. Use img tag and display: inline; for the card div.
.card {
width: 100%;
height: 100%;
background-size: cover;
display:inline;
}
<div class="poker is2d">
<div class="middle">
<div class="card two hearts"> <img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4='/></div>
<div class="card two hearts"> <img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4='/></div>
<div class="card two hearts"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
Edit: If you do not want to use img you can put the img to invisible and then use the background image as the div would still have the dimensions of the img tag inside. Not a good solution, but it would work.

Learn flex or grid; both very useful for things like this.
Flex example:
html, body {
height: 100%;
margin: 0;
}
.card {
border: 1px black solid;
border-radius: 15px;
flex-grow: 1;
padding: 5px;
margin: 5px;
}
.container {
display: flex;
height: 100%;
}
<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>

How do I use several bootstrap jumbotrons with different images, on the same webpage?

I have a single page application, and basically I have three tabs 'Home','hip hop' and 'jazz'. When I click one, it displays a jumbotron at the top of the page with the respective music genre/title and a special picture. However, I get the image of the third one (jazz) being displayed for all three. I want to make sure I can put different images for each Jumbotron.
Would appreciate any help
THIS IS THE FIRST PART - HOME
<div id="Home" class="tabcontent">
<h3>Home</h3>
<style>
.jumbotron{
margin-top: 20px;
background-image: url(https://fsmedia.imgix.net/c3/a6/a3/2d/bec0/4173/85f8/effdf05151b4/unfortunately-theres-not-even-a-trailer-for-rick-and-morty-season-4-yet.png)
}
.lead{
font-size:140%;
color:white;
}
.lead2{
color:white;
}
.item{
width: 100%;
height:100%
}
</style>
<div class="jumbotron">
<h1 class="display-4">THE MINISTRY OF MUSIC</h1>
</div>
THIS IS THE SECOND PART - HIPHOP
<div id="Hiphop" class="tabcontent">
<h3>Hiphop</h3>
<style>
.jumbotron{
margin-top: 20px;
background-image: url(http://nerdyrottenscoundrel.com/wp-content/uploads/2015/03/FireplaceOnline-.jpg)
}
.lead{
font-size:140%;
color:white;
}
.lead2{
color:white;
}
.item{
width: 100%;
height:100%
}
</style>
<div class="jumbotron">
<h1 class="display-4" style="color: white;">HipHop</h1>
</div>
THE THIRD PART - JAZZ
<div id="Jazz" class="tabcontent">
<h3>Jazz</h3>
<style>
.jumbotron{
margin-top: 20px;
background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/701/articles/2015/12/rocky-workout-1515613864.jpg)
}
.lead{
font-size:140%;
color:white;
}
.lead2{
color:white;
}
.item{
width: 100%;
height:100%
}
</style>
<div class="jumbotron">
<h1 class="display-4" style="color: white;">Jazz</h1>
</div>

As per my comment, it seems like you have an incorrect concept of CSS. You cannot "scope" the styles declared in a <style> element by shoving it in a container: the concept of scoped CSS does not exist in that sense. Instead, combine all the generic styles of your jumbotron, and leave the background-image styling to unique identifiable selectors:
<style>
.jumbotron{
margin-top: 20px;
}
.lead{
font-size:140%;
color:white;
}
.lead2{
color:white;
}
.item{
width: 100%;
height:100%
}
#Home .jumbotron {
background-image: url(https://fsmedia.imgix.net/c3/a6/a3/2d/bec0/4173/85f8/effdf05151b4/unfortunately-theres-not-even-a-trailer-for-rick-and-morty-season-4-yet.png);
}
#Hiphop .jumbotron {
background-image: url(http://nerdyrottenscoundrel.com/wp-content/uploads/2015/03/FireplaceOnline-.jpg);
}
#Jazz .jumbotron {
background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/701/articles/2015/12/rocky-workout-1515613864.jpg);
}
</style>
And your DOM should be simplified to look as such:
<div id="Home" class="tabcontent">
<h3>Home</h3>
<div class="jumbotron">
<h1 class="display-4">THE MINISTRY OF MUSIC</h1>
</div>
</div>
<div id="Hiphop" class="tabcontent">
<h3>Hiphop</h3>
<div class="jumbotron">
<h1 class="display-4" style="color: white;">HipHop</h1>
</div>
</div>
<div id="Jazz" class="tabcontent">
<h3>Jazz</h3>
<div class="jumbotron">
<h1 class="display-4" style="color: white;">Jazz</h1>
</div>
</div>
Also, you should be placing the <style> tags in the <head> element.

<style>
.jumbotron{
margin-top: 20px;
}
.jumbotron--home{
background-image: url(https://fsmedia.imgix.net/c3/a6/a3/2d/bec0/4173/85f8/effdf05151b4/unfortunately-theres-not-even-a-trailer-for-rick-and-morty-season-4-yet.png)
}
.jumbotron--hiphop{
background-image: url(http://nerdyrottenscoundrel.com/wp-content/uploads/2015/03/FireplaceOnline-.jpg)
}
.jumbotron--jazz{
background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/701/articles/2015/12/rocky-workout-1515613864.jpg)
}
.lead{
font-size:140%;
color:white;
}
.lead2{
color:white;
}
.item{
width: 100%;
height:100%
}
.display-4 {
color: white;
}
</style>
<!--THIS IS THE FIRST PART - HOME-->
<div id="Home" class="tabcontent">
<h3>Home</h3>
<div class="jumbotron jumbotron--home">
<h1 class="display-4">THE MINISTRY OF MUSIC</h1>
</div>
<!-- THIS IS THE SECOND PART - HIPHOP -->
<div id="Hiphop" class="tabcontent">
<h3>Hiphop</h3>
<div class="jumbotron jumbotron--hiphop">
<h1 class="display-4">HipHop</h1>
</div>
<!-- THE THIRD PART - JAZZ -->
<div id="Jazz" class="tabcontent">
<h3>Jazz</h3>
<div class="jumbotron jumbotron--jazz">
<h1 class="display-4" style="color: white;">Jazz</h1>
</div>

Resize div with jquery javascript and stretch background image

I have a box div and it has header and body. Contains a div that has a background image.
setInterval(function(){
var height = $(".box").height();
$(".box").height(height+2)
}, 1000);
.box{
height: 100%;
background-color: #22ff2f;
width:350px;
}
.box-header{position:inherit; background-color:#9ed;width:100%;}
.box-body{}
.window{
background-position: center;
background-size: cover;
background-image: url('http://dailybestlike.com/wp-content/uploads/2015/07/simple-ideas-products-11.jpg');
min-height:190px;
width:100%;
height:100%;
position:relative;
text-align:center;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box">
<div class="box-header">
header
</div>
<div class="box-body">
<div class="window">
</div>
</div>
</div>
my .box is a resizable box, so it will be resize with mouse
But image does not stretch the box. I want to do this with CSS properties. I do not want to set size with javascript. Is this possible?
WORKİNG DEMO

Try this,
<div class="box">
<div class="box-header">
header
</div>
<div class="box-body">
<div class="window">
</div>
</div>
</div>
JS CODE :
setInterval(function() {
var height = $(".window").height();
$(".window").css({
'height': height + 100
});
}, 1000);
This code will stretch your image.

You need to add height for your .box-header, and thanks it you will be can calc your .box-body height. Now your height:100%; in .window will be work properly.
Check this:
setInterval(function(){
var height = $(".box").height();
$(".box").height(height+2)
}, 1000);
.box{
height: 100%;
background-color: #22ff2f;
width:350px;
}
.box-header{
position:inherit;
background-color:#9ed;
width:100%;
height: 20px;
}
.box-body{
height: calc(100% - 20px);
}
.window{
background-position: center;
background-size: cover;
background-image: url('http://dailybestlike.com/wp-content/uploads/2015/07/simple-ideas-products-11.jpg');
min-height:190px;
width:100%;
height:100%;
position:relative;
text-align:center;
overflow:hidden;
}
<div class="box">
<div class="box-header">
header
</div>
<div class="box-body">
<div class="window">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you want to have a dynamic height of the header, you can dynamically calculate it in javascript.

Don't change .box height if you want the background image to resize, change .window height!
https://jsfiddle.net/t87tjmmk/
setInterval(function(){
var height = $(".box").height();
$(".window").height(height+2); }, 1000);

I achieved what you want here.
See Demo here
HTML
<div class="box">
<div class="box-header">
header
</div>
<div class="box-body">
<div id='w' class="window">
</div>
</div>
</div>
JavaScript
var w=document.getElementById('w');
var x=192;
setInterval(function(){
var height = $(".box").height();
$(".box").height(height+2);
w.style.minHeight=x+"px";
x+=2;
},90);
CSS
.box{
height: 100%;
background-color: #22ff2f;
width:350px;
}
.box-header{position:inherit; background-color:#9ed;width:100%;}
.box-body{}
.window{
background-position: center;
background-image: url('http://dailybestlike.com/wp-content/uploads/2015/07/simple-ideas-products-11.jpg');
min-height:190px;
width:100%;
height:100%;
position:relative;
text-align:center;
overflow:hidden;
background-repeat:no-repeat;
background-size: 100% 100%;
}

CSS float:left and overflow:visible cutting off text

I'm currently trying to make a color gradient in javascript with numerical values in some of the divs to represent as the scale. However, I've noticed with larger values, the numbers get cut off due to the float:left. I've also tried used display:inline-block, but it seems that has weird positioning and leaves gaps between them. I need the divs flush together, but just have the text overflow ontop of the following div. Is there a way to do this?
Both examples I mentioned are here:
http://jsfiddle.net/y3LTZ/3/
<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
</div>
and
<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
<div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
<div style="width: 20px;height:100%;float:left;background-color:green;"></div>
<div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
<div style="width: 20px;height:100%;float:left;background-color:green;"></div>
<div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
</div>
Thanks!

DEMO
using inline-block
HTML
<div class="wrapper">
<div class="single-block red">texts</div>
<div class="single-block green"></div>
<div class="single-block red">texts</div>
<div class="single-block green"></div>
<div class="single-block red">texts</div>
</div>
CSS
.wrapper{
width: 600px;
height: 30px;
white-space: nowrap;
font-size:0;
}
.single-block{
width:20px;
height:100%;
display:inline-block;
vertical-align:bottom;
font-size:16px;
}
.red{
background-color:red;
position:relative;
}
.green{
background-color:green;
}

If you want the text overlap the following div, you have to give them position:absolute;
<div style="position: relative; overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
<div class="column" style="background-color:red;">
<div class="textontop">texts</div>
</div>
<div class="column" style="background-color:green;"></div>
<div class="column" style="background-color:red;">
<div class="textontop">texts</div>
</div>
<div class="column" style="background-color:green;"></div>
<div class="column" style="background-color:red;">
<div class="textontop">texts</div>
</div>
</div>
Css:
.column {
width:20px;
height:100%;
overflow: visible;
float:left;
z-index:0;
}
.textontop {
position:absolute;
z-index:999;
}
Jsfiddle:
http://jsfiddle.net/y3LTZ/5/

Horizontal scrolling with sticky div that stays on the left border

I have two rows of data (green) and a header (red), which should be visible at all times:
Check out the example I already have:
http://jsfiddle.net/j9C8R/33/
Now the red header scrolls away together with the content, but it should stick to where it is now, but scroll vertically with the content (MS Excel style).
How can this be achieved (preferably with only CSS).
UPDATE: It is important that the red headers scroll vertically along with the corresponding content but stick to the left edge when scrolling horizontally.
.main {
background-color: blue;
overflow: scroll;
height: 200px;
width: 400px;
}
.row {
height: 50px;
overflow: scroll;
clear: both;
width: 1000px;
background-color: yellow;
}
.sticky,
.content {
float: left;
width: 150px;
border: 1px solid black;
}
.sticky {
background-color: red;
}
.content {
background-color: green;
}
<div class="main">
<div class="row">
<div class="sticky">Sticky header A</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
</div>
<div class="row">
<div class="sticky">Sticky header B</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
</div>
<div class="row">
<div class="sticky">Sticky header C</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
</div>
<div class="row">
<div class="sticky">Sticky header D</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
</div>
<div class="row">
<div class="sticky">Sticky header E</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
</div>
</div>

UPDATE
please note the below is now a little out of date as we have css position sticky
Original Post
I do not think it is possible to achieve your goal through pure css as items that are sticky usually use position:fixed which unfortunately fixes them relative to the viewport.
with the use of javascript (in this case the jquery library) and absolute positioning, you should be able to achieve what you are after:
$('.main').scroll(function() {
$(this).find('.sticky').css('left', $(this).scrollLeft());
});
.main {
background-color:blue;
overflow:scroll;
height:200px;
width:400px;
}
.row {
height:50px;
overflow:scroll;
clear:both;
width:1000px;
position:relative;
background-color:yellow;
padding-left:150px;
box-sizing:border-box;
}
.sticky, .content {
float:left;
width:150px;
border:1px solid black;
}
.sticky {
background-color:red;
position:absolute; left:0; top:0;
}
.content {
background-color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
</div>

Ok I've scrapped your thing and have made a complete new one, I've just not wrapped up things inside a position relative container but you can manage to do it atleast
The things are easy for vertical scroll but if you expect horizontal scroll and move headers along, (CSS Wont Just Do It)
Demo
CSS
.head {
background-color: #f00;
width: 300px;
position: absolute;
left: 100px;
}
.head table {
width: 100%;
}
.body {
position: relative;
left: 100px;
top: 20px;
width: 300px;
height: 50px;
overflow-y: auto;
}
.body table {
width: 100%;
}
.body td {
width: 100px;
}
.head table td {
width: 100px;
}
.left {
position: absolute;
background-color: #0f0;
width: 90px;
top: 40px;
}

Categories

Resources