我的描述包装有20px填充。然后我有一个内容很多的描述div。
包装器容器使用overflow: hidden
,因此隐藏了此容器外的任何内容。但是为什么我的描述会忽略它的包装填充?
是因为我正在使用box-sizing: border-box
吗?
请看我的小提琴:http://jsfiddle.net/nZ38w/2/
更新:我可以设置描述框的高度,然后使用overflow:hidden,但不是另一种方式吗? (http://jsfiddle.net/nZ38w/4/)
更新2:似乎在details-right-section
上设置新的高度是唯一的解决方案:http://jsfiddle.net/nZ38w/5/
代码:
<div class="row">
<section class="column1">
<!-- data here -->
</section>
<section class="column2 details-right-section">
<div class="description-container" >
<h2>Description</h2>
<div class="description">
To much content here
</div>
</div>
</section>
</div>
/* CSS */
/* Rest css */
body { font-size: 12px; margin: 0; padding: 0;}
h1, h2 { margin: 0; padding: 0; }
div, section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* Main elements */
.row { width: 300px; height: 175px; }
.column2 {
width: 300px;
height: inherit;
background-color: #cbdddc;
}
/* Description container */
.description-container {
height: inherit;
overflow: hidden;
border: solid 1px #ff8182;
padding: 20px;
}
.description {
line-height: 16px;
line-height: 1.6rem;
background-color: #e2e2e2;
}
答案 0 :(得分:1)
您可以创建另一个div class="description-overflow"
,因为您知道确切的高度为175px-40px
,它会为您提供所需的输出
答案 1 :(得分:0)
尝试从height: inherit;
删除.column2
,或从height: 175px;
删除.row
(或将height
更改为min-height
)。