Tôi có 2 fieldsets được bọc trong một <div>, hãy gọi cho chúng blah1 và blah2.Trường quay chiều cao 100% của phụ huynh
blah2 có thể phát triển như tối đa của <div> mẹ của nó, nhưng tôi cần blah1 có chiều cao% cùng của anh chị em mình blah2
Câu trả lời là kinda lạ, nhưng tôi làm cho nó hoạt động, trông giống như bên lề đã được thực hiện một mess ở đây, nếu tôi đặt nó là margin: 0 5px; sau đó tôi có thể làm cho cả hai fieldsets để có cùng height như cha mẹ của họ
Một phần của css đánh dấu:
fieldset
{
border: 1px solid #ddd;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
border-radius: 8px;
margin: 0 5px;
height: 100%;
}
legend
{
font-size: 1.2em;
font-weight: bold;
}
.blahContainer{
width: 100%;
height: 100%;
}
.blahColumna1{
width: 70%;
height: 100%;
}
Nếu bạn muốn xem demo cuối cùng, click here.
Hy vọng nó có thể giúp người khác ...
Hãy thử gói cả <fieldset> s trong một khung chứa <div> rằng isn không cố định chiều cao - nó sẽ gọn gàng kèm theo blah2 và sẽ tăng lên đến kích thước tối đa của phụ huynh <div> của bạn. Đặt chiều cao của blah1 là 100% chứa <div>.
Dường như nó không hoạt động, có thể tôi đang làm điều gì sai, bạn có thể cập nhật bản trình diễn của mình để tôi có thể hiểu bạn tốt hơn không? thx – Luis
Tốt nhất tôi có thể làm là http://jsfiddle.net/nGCdx/8/ - cần thiết để cung cấp cho các container một chiều cao để làm cho nó hoạt động. Tôi đã cho nó một giá trị tùy ý nhỏ. – Jhong
Trông giống như một lựa chọn tốt trong khi tôi tìm cách để làm cho nó chính xác những gì tôi cần, thx cho nỗ lực – Luis
tôi đã có thể để có được nó làm việc bằng cách thêm padding-bottom đến fieldset chỉ Chrome. Điều này cân bằng một số chiều cao thêm%. Thật tuyệt khi nó hoạt động (tương đối nhất quán) ngay cả khi thay đổi kích cỡ.
if (navigator.userAgent.toLowerCase().indexOf('chrome')) { // Replace this with your preferred way of checking userAgent
$('fieldset').css('padding-bottom', '4%'); // Exact percent may vary
}
Cũng giống như lưu ý, tôi thấy vấn đề này cũng là một vấn đề trong ít nhất IE8 - IE11, vì vậy việc khắc phục có thể được áp dụng cho IE.
Hoạt động trong Chrome, nhưng không phải IE10. –