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 div
s 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.
I have done with some row of jquery
<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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.