这是使用display: table
和display: table-cell
CSS声明的2列标记:
.table {
display: table;
}
.cell {
border: 2px solid black;
vertical-align: top;
display: table-cell;
}
.container {
height: 100%;
border: 2px solid green;
}
<div class="table">
<div class="cell">
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
</div>
<div class="cell">
<div class="container">Text</div>
</div>
</div>
但是.container
块不会垂直填充父单元格。以下是JsFiddle的示例:http://jsfiddle.net/MGRdP/2。
我有什么 | 我需要什么
请不要提出JS解决方案。
答案 0 :(得分:46)
答案 1 :(得分:26)
为height: 100%;
overflow:auto;
和.cell
答案 2 :(得分:21)
table{
height:1px;
}
table > td{
height:100%;
}
table > td > .inner{
height:100%;
}
确认工作:
答案 3 :(得分:15)
除了jsFiddle之外,如果您希望将其设置为跨浏览器(IE11,Chrome,Firefox),我可以提供一个丑陋的黑客。
而不是javaserver.java
,将height:100%;
放在height:1em;
。
答案 4 :(得分:8)
这正是你想要的:
<强> HTML 强>
<div class="table">
<div class="cell">
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<div class="cell">
<div class="container">Text</div>
</div>
</div>
<强> CSS 强>
.table {
display: table;
height:auto;
}
.cell {
border: 2px solid black;
display:table-cell;
vertical-align:top;
}
.container {
height: 100%;
overflow:auto;
border: 2px solid green;
-moz-box-sizing: border-box;
}
答案 5 :(得分:5)
使表格单元格相对位置,然后使内部div位置为绝对位置,顶部/右侧/底部/左侧全部设置为0px。
.table-cell {
display: table-cell;
position: relative;
}
.inner-div {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
答案 6 :(得分:3)
定义您的.table
和.cell
height:100%;
.table {
display: table;
height:100%;
}
.cell {
border: 1px solid black;
display: table-cell;
vertical-align:top;
height: 100%;
}
.container {
height: 100%;
border: 10px solid green;
}
<强> Demo 强>