个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
28
4
我正在尝试制作一个包含三个 div 的 div。第一个和最后一个 div 的大小应该根据它们的内容来确定。如果它们包含 10 行文本，则它们应该足够大以显示而不会溢出或滚动。
中间的 div 应该使用剩余的空间，当没有足够的空间显示其全部内容时应该使用滚动条。
我得到了一个部分解决方案，其中第一个和第三个 block 是固定的，第三个 block 将使用剩余的大小。我不确定如何跳转以允许根据其内容调整第一个和第三个 block 的大小。
如有任何关于如何执行此操作的提示，我们将不胜感激。
这是我目前所拥有的:
<html>
.outerDiv{
/* The contents of this don't really matter */
position: absolute;
height:400px;
top:25px;
}
.innerA{
position: absolute;
top:0ex;
height:3ex; /* How can I set this based on the contents of the div? */
}
.innerB{
position: absolute;
top: 4ex; /* This needs to be based on the size of innerA */
bottom: 4ex; /* This needs to be based on the size of innerC */
overflow-y: scroll;
}
.innerC{
position: absolute;
height:3ex; /* How can I set this based on the contents of the div? */
bottom:0ex;
}
</style>
<div class="outerDiv" style="width:100%; border:1px solid #888888;">
<div class="innerA" style="width:70%; border:1px solid #000088;"></div>
<div class="innerB" style="width:60%; border:1px solid #008800;">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>vv</div>
<div class="innerC" style="width: 50%;border:1px solid #001100;"></div>
</div>
</html>
我的偏好是使用以下方法解决问题:
最佳答案
如果你不介意 jquery，你可以计算 A 和 C div 的高度，然后从你的 outerDiv 中减去:
$(".innerB").each(function() {
var outerDivHeight = $('.outerDiv').outerHeight();
var innerAHeight = $('.innerA').outerHeight();
var innerCHeight = $('.innerC').outerHeight();
var innerBHeight = outerDivHeight - innerAHeight - innerCHeight;
$(this).css("height", innerBHeight);
});
这是一个 fiddle :http://jsfiddle.net/Sz6CL/
关于html - CSS:调整 div 大小，以便中间 div 使用所有剩余空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17354132/
28
4
0
我正在运行一个带有 while 约束的 SQL 查询，其中包含一些“id”。例如: SELECT table.id FROM TableOne table WHERE table.id IN (1,
我正在寻找在替换其中一个元素后打印元素列表的最正确方法。我可以按如下方式做，但显然很困惑。 #!/usr/bin/python import sys file = open(sys.argv[1])
这个问题在这里已经有了答案: How wide is the default `` margin? (4 个答案) How do I remove the top margin in a web
当我尝试使用命令安装 rvm 时::(I am Using UBUNTU 12.04 LTS) curl -L https://get.rvm.io | bash -s 当我尝试与简单用户相同的命令时
我使用 GOPro 工作人员 6 个月前发送给我的命令，通过终端(在 Gopro 网络上)使用 Gopro Hero3 拍摄照片/视频。有效。但是，在过去的一个月里，我一直在尝试再次执行此操作，并且不
尽管知道我不应该关闭应用程序按钮，但我仍然这样做。完成所有 Activity 后，我调用 finish() 方法，它们调用析构函数和所有内容。用户的行为也是正确的。但我想知道为什么还有 5 个打开的线
当我在 Rest Controller 中的类级别启用 @Validated spring 注释时，会生成 2 个验证上下文(每个验证上下文都有不同的前缀)。 @Validated 注释是必需的，因为
在旧的 API 中，剩余的允许容量显然作为 X-Ratelimit-Remaining 返回HTTP header 。 然而，current version's documentation对此一无所获
我一直在使用 Service Fabric 一段时间，成功构建、部署和测试了多个服务，但我刚刚完成构建的服务在部署时失败(请参阅下面的错误)。在诊断中，我尝试使用 VS 模板(没有代码更改)创建和部署
这个问题在这里已经有了答案: 关闭 12 年前。 Possible Duplicate: Progress unit in ProgressDialog 如何覆盖进度条进度消息，即 61/100 到
我正在用 Objective-C (Cocoa) 编写命令行实用程序的前端。我需要解析输出以检查不同类型的消息。有两种基本类型；信息消息和下载状态消息。信息消息始终以以下内容之一开头:INFO:、WA
我是一名优秀的程序员,十分优秀！