CODEWITHSUNDEEP
htmlcss
Marco Giancarli
Marco Giancarli

Reputation: 90

Making a scrollable div without knowing the available height of the container

Disclaimer: I'm not the most experienced person when it comes to HTML, so this may be an obvious fix.

Here's my predicament: I'm working on a web page designed for smartphones and tablets, so the dimensions of the screen varies a lot. I have a div on the right side of my page which has a width of 60% and a height of 85%. Inside this there is a square image with width: 100% and another div with a few buttons that I would like to make scrollable. NOTE: I do not want to have the outermost of these two divs be scrollable, only the innermost one.

Because of this setup I can't know for sure where on the page the inner div begins, but I do know where it ends.

I looked through some old questions but I wasn't able to find anything too similar, but I did find a question where someone knows the size of the outermost div in a simplified version of the problem. I adapted the simplified HTML so that it represents my problem.

Here's the jsfiddle: http://jsfiddle.net/s9Zfx/8/

Basically, I need to make it so that everything stays inside the blue box, the green box stays as is, and the red box is scrollable and contains the yellow box.

Thanks.

Upvotes: 0

Views: 70

Answers (1)

faby
faby

Reputation: 7558

I have done with some row of jquery

http://jsfiddle.net/s9Zfx/9/

    <body>

<div id="div1">
    <div id="image-container">
        <img src=""></img>
    </div>
    <div id="div2">
        <div id="div3">
            <p>some scrollable</p>
            <p>content here</p>
        </div>
    </div>
</div>

</body>

css

    div{ display: table-cell;float:left;}
#div1 {
    height: 500px;
    width: 400px;
    border:5px solid blue;

}
#div2 {
    overflow:auto;
    border:5px solid red;
    height:100%;
    width:100%;
}
#div3 {
   height:1000px;
   border:5px solid yellow;
    white-space: nowrap;
    width:100%;
}
#image-container {

    width: 100%;
    border:5px solid green;
}

jquery

var result1 = $("#image-container").height();

var result2 = $("#div1").height();

 $("#div2").height(result2-result1);

or if you want all in one line

$("#div2").height($("#div1").height() - $("#image-container").height());

without jquery I think it's impossible. Hope this solution may help you

Upvotes: 1

Related Questions