Question

免责声明：在HTML方面，我不是最有经验的人，所以这可能是一个明显的解决方法。

这就是我的困境：我正在为专为智能手机和平板电脑设计的网页上工作，因此屏幕的尺寸变化很大。我的页面右侧有一个div，宽度为60％，高度为85％。在这里面有一个方形图像width: 100%和另一个div，其中有一些我想要滚动的按钮。注意：我不希望这两个div的最外层可以滚动，只能是最里面的。{/ p>

由于这种设置，我无法确定内部div开始在页面的哪个位置，但我知道它的结束位置。

我查看了一些旧问题，但我找不到任何太相似的问题，但我确实找到了一个问题，其中有人知道问题的简化版本中最外层div的大小。我改编了简化的HTML，以便它代表我的问题。

这里是jsfiddle：http://jsfiddle.net/s9Zfx/8/

基本上，我需要制作它，以便所有内容都保留在蓝色框内，绿色框保持原样，红色框可滚动并包含黄色框。

感谢。

Answer 1

我已经完成了一些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);

或者如果你想要一行

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

没有jquery我认为这是不可能的。希望这个解决方案可以帮到你

在不知道容器的可用高度的情况下制作可滚动的div

1 个答案: