6
Tôi đang sử dụng thủ thuật CSS chiều cao bằng nhau như được nêu trên page này.Tránh phần tử bị cắt khi chúng ở bên trong phần tử "tràn: ẩn"
Mọi thứ đều hoạt động tốt cho đến hôm nay khi tôi cần thêm hộp thoại bên trong một trong các cột, được đặt hoàn toàn để đưa nó ra khỏi luồng. Vấn đề là vì container có "overflow: hidden" trên đó, đối thoại đang bị cắt bỏ khi nó tràn.
Ngoài việc đưa đối thoại ra bên ngoài phần tử vùng chứa, có cách nào có thể làm cho nó hiển thị qua CSS không?
Dưới đây là một ví dụ nhỏ minh họa những gì tôi đã đề cập.
<style>
.container { overflow: hidden; margin-top: 30px }
.col {
float: left;
padding-bottom: 2000px;
margin-bottom: -2000px;
border-right: 1px solid black;
width: 100px;
background-color: grey;
}
.col.third { border-right: none }
#div-a { position: relative }
#div-b {
position: absolute;
background-color: red;
width: 35px;
height: 350px;
bottom: 0;
right: 0;
margin: 5px;
border: 2px solid black;
}
</style>
<div class="container">
<div class="col first">
<p style="height: 100px">One</p>
</div>
<div class="col second">
<p style="height: 300px">Two</p>
<div id="div-a">
<!-- this gets cut off by the "overflow: hidden" on div.container -->
<div id="div-b">
Foo
</div>
</div>
</div>
<div class="col third">
<p style="height: 200px">Three</p>
</div>
</div>
Bạn thấy rằng div#div-b bị cắt ở phía trên khi nó tràn trong các yếu tố div.container.