CODEWITHSUNDEEP
htmlcss
Zggb
Zggb

Reputation: 47

100 height in nested div

I'm stuck on this trouble. http://arenda2.herokuapp.com/catalog When I use select box, jQuery add second select box ang height is change. The scroll bord must be in one line with map.

My examples https://jsfiddle.net/nsykfx7o/

HTML:

<div class="left">
    <div class="filter">
        <p> Some text </p>
    </div>
    <div class="list">
        <p> Some other text </p>        
    </div>
</div>

CSS:

html {
    height: 100%;
    background-color: grey;
}
body {
    margin: 0;
}
.left {
    width: 300px;
    height: 100vh;
    background-color: red;
}

p  {
    margin:0;
    padding:0;
}
.filter {
    background-color: yellow;
}

.list {
    overflow-y: scroll;
    height: 100%;
}

In .filter height must be auto, depending on content. .list height must use the rest height, but not goes out of the frame 100 vh

Upvotes: 1

Views: 58

Answers (2)

Thomas Bormans
Thomas Bormans

Reputation: 5352

Not sure if I understand you correctly, but you will need JavaScript. I have updated the JSFiddle

This is the JavaScript code (in jQuery):

$(document).ready(function() {
    $('.list').css('height', $(window).height()-$('.filter').height());
});

Upvotes: 1

Julius Š.
Julius Š.

Reputation: 174

here's a fix for you https://jsfiddle.net/n5avavtz/1/

basically what I did is changed the height points to percent. Also changed the overflow-y to auto

Upvotes: 0

Related Questions