CSS gặp vấn đề với height trong div

[websharepoint]

Mình có 1 vấn đề nan giải mong được các bậc tiền bối chỉ bảo

Mình có đoạn html như sau:

<div style="width:200px; border:1px green solid">
<div style="background-color:#66FFCC; width:60px; float:left">Text</div>
<div style="background-color:#FFCCCC; width:140px; float:left">Text Text Text Text Text Text Text</div>
</div>

Làm thế nào cho đoạn text bên trái có nền màu xanh lấp đầy khoảng trống bên dưới.. mình không muốn dùng thuộc tính height và table cho cái này...
Vậy có cách nào khác không?
Mong được giúp đỡ!

[Spirit]

Với div thì bạn ko thể làm cho nó tự động giãn ra theo div cùng hàng dc. Vì div ngang hàng thì là anh em và ko phụ thuộc gì vào nhau.

[votevn]

chỉ có cách dùng table mà không muốn dùng thì bó tay.

[VyTien]

thêm ký tự khoảng trắng vào bên nào còn thiếu cho đến khi nào có chiều cao bằng với div bên kia là oki

[websharepoint]

Ô! thì ra là vậy.. chắc là phải dùng table thôi..

[2_lua_IT]

Theo cách tư duy của Table thì kô được là cái chắc. Sao bạn kô dùng mẹo 1 chút. Và tôi làm như vậy, chắc bạn cũng hiểu được tôi làm j.
<div style="background-color:#66FFCC; width:202px; border:1px green solid;">
<div style="width:60px; float:left;">Text</div>
<div style="background-color:#FFCCCC; width:140px; float:right;">Text Text Text Text Text Text Text</div>
</div>
Chúc bạn vui vẻ.

[Spirit]

Theo cách tư duy của Table thì kô được là cái chắc. Sao bạn kô dùng mẹo 1 chút. Và tôi làm như vậy, chắc bạn cũng hiểu được tôi làm j.
<div style="background-color:#66FFCC; width:202px; border:1px green solid;">
<div style="width:60px; float:left;">Text</div>
<div style="background-color:#FFCCCC; width:140px; float:right;">Text Text Text Text Text Text Text</div>
</div>
Chúc bạn vui vẻ.

Đã bảo là Div nó ko phải Table, bác mồm thì bảo tại tư duy table, bác đã thoát ra dc chưa thế, bác tự test cái code của bác đi rồi hãy post lên nhé :emlaugh:

[websharepoint]

Oh! Mình hiểu ý của bạn 2_lua_IT rồi.. đây cũng là 1 sáng kiến hay đấy..
Nhưng vấn đề của mình ở đây là: "Buồn buồn thì cột bên phải dài hơn cột bên trái nhưng vui vui thì cột bên trái lại dài hơn.. ý mình là dữ liệu load lên không biết trước được là cột nào dài hơn.. nên mình không thể dùng cách của bạn 2_lua_IT được..
Thanks! :)

[2_lua_IT]

Vậy là các pác chưa hiểu hết ý của tui. Cho nên khi code, cột nào có data ngắn hơn thì để background(bg) bên ngoài(cấp cha), còn data dài hơn thì để trong cấp con. OK ? Pác Spirit à ? Tui test rồi nhá(trên IE, Firefox,...), pác chưa run thì kô nói lung tung nhá, tiếp tục làm table đi. Goodlucks.

[Spirit]

Hix, ép em vậy anh, giờ kêu em làm table sao em làm dc.

http://img84.imageshack.us/img84/189/testkx8.gif

Em nhìn code bác đưa thì em hiểu là bác cho cột trái là div ngoài, nhưng cái của ko giải quyết được tình huống như làm 1 hàng như vậy mà có 3-4 cột và background lần lượt thay đổi.

Bác muốn cái div ngoài nó thay đổi height theo div trong thì cũng là 1 vấn đề mà nhỉ :ohmy:

Bác bảo em chưa test thì tội cho em quá, em xài IE thì nó chạy (trước giờ vấn đề này thì IE luôn chạy vì nó hiểu cái div như cái table) nhưng FF thì ra cái hình em up đấy bác.

[2_lua_IT]

Hôhô, sorry pác Spirit, đúng như pác nói trên Firefox 2.0.0.12 chạy kô đúng với code đó. Mà có j đâu, khắc phục dễ ẹt, chỉ cần cho overflow:hidden; vào div đầu tiên là ok chứ j. Còn trường hợp có cột 3 cột 4 thì cũng sử dụng div lồng nhau như vậy được, nhưng tôi thấy kô khả thi cho nhiều cột. Nếu có quá nhiều cột thì sử dụng table như pác nói sẽ dễ quản lý hơn. Thanks bro.

[trouble_maker]

hehe muốn cái nền ở cột bên trái nó dãn ra khi cột bên phải nó kéo dài chiều cao thì dùng mẹo này cũng đc. Đó là tạo một cái nền có 2 cột (áp dụng cho fixed width layout). Rồi để cột trái vừa đúng chiều dài cái nền bên trái, và bên phải cũng tương tự. Chả tốn gì dung lượng đâu, 1 cái nền có chiều cao 1px.

ví dụ:

#warper {
width: 500px;
margin: 0 auto; /*cả cục DIV này sẽ ra giữa màn hình hê hê.*/
background: url(backgound.gif); /* cái nền này có chiều cao là 1px.*/
overflow: hidden.
}
#leftbox{ /*cột trái.*/
float: left;
width: 150px;
}
#rightbox{ /*cột phải.*/
float: right;
width: 350px;
}

như thế thì cột trái hoặc phải khi bị kéo dài chiều cao thì cái nền của warper sẽ lặp tiếp.

MÌnh thấy dùng table vẫn tốt mà, làm nhanh và trình duyệt nào cũng như nhau khi thể hiện.

Còn thích dùng kiểu Tableles DIV + CSS thì vẫn có lúc nên dùng với table, đó là khi mình thể hiện một Data grid trong trang, vẫn phải chèn table vào, chứ chèn 1 cục div với các thẻ float: left vào đó thì hoa mắt hơn cả table.

[Về Đâu]

chỉ có cách xài min-height và hack min-height.

[lazyCoder]

trouble maker nói đúng á
- 2 cột trái và phải không cần bg color
- cột mẹ (container) có 1 background cao 1px, bên trái màu xanh, bên phải màu ffc đó, repeat-y

có 1 số cách không cần dùng bg nhưng phải có javascript và hack css một tý, nói chung không đẹp.

Tạm thời dùng giải pháp background cho div mẹ đi.

Còn table thì try to say bye bye, sau này khó maintain code lắm ;)

[laolao]

cứ xài table trong mấy trường hợp này cho đơn giản... nếu sữ dụng div mà css phức tạp wá thì chạy nặng hơn là table... right?

[Spirit]

Nặng hơn thì ko, tuy nhiên cũng cần hiểu là 1 số cái liên wan tới data thì nên xuất ra table, chỉ có layout thật sự thì mới xài div.

Còn nếu form đơn giản giải quyết dc bằng Div, mà nó có thể nằm ở code riêng của form thì vẫn nhẹ hều thôi. Căn bản là Table như anh lazycoder nói đó, khó maintaince, mỗi lần nhìn vô code là chóng hết cả mặt ^_^

[2_lua_IT]

Cách của pác "trouble_maker's" chỉ dùng cho Fix Width thôi. Các pác Progammer buồn buồn cho Width rộng ra hay thu hẹp lại hoặc đổi màu bground thì chết. Sửa lại hình à ? hihi. Nếu data có quá nhiều hàng và cột thì nên dùng table, uyển chuyển hơn nhiều.

[duc.ngtuan]

Cách của bạn trouble_maker hay lazyCode là đúng đấy. Đặc biệt cho trường hợp này. Cái đấy gọi là Faux Column. Bạn có thể xem trên ALA: http://www.alistapart.com/articles/fauxcolumns. Nếu cải tiến đi một chút có thể xài cho cột với độ rộng theo tỉ lệ phần trăm.
Cách này dùng cho layout. Còn nếu trình bày dữ liệu nhiều hàng và cột như bạn 2_lua bảo thì tất nhiên chả ai xài div làm gì.

[phongjalvn]

Đúng là cái này gọi là faux column, tuy nhiên cũng có 1 cách khác, hơi phức tạp ( cho người viết, chứ chạy lại nhẹ nhàng, không phải như bác nào nói code phức tạp chạy nặng đâu nhá)
Bác nào thử test cái này nhé ( Viết examples, lên chỉ chạy test trên firefox thôi, muốn fix bug các trình duyệt khác mấy bác tự ngâm cứu thêm, ngoài ra cái này chưa clear float, các bác tham khảo thêm để clear float vậy ;) )

CSS:


#block_1, #block_2, #block_3
{
padding-bottom: 32767px;
margin-bottom: -32767px;
width:30%;
float:left;
}
#block_1{
background:#00FF00;
}
#block_2{
background:#663399;
}
#block_3{
background:#CC3300;
}
#wrapper
{
overflow: hidden;
}

HTML :



<div id="wrapper">
<div id="block_1">
<h2>Block 1</h2>
<p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>

<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
</div>

<div id="block_2">
<h2>Block 2</h2>
<p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
</div>
<div id="block_3">
<h2>Block 3</h2>

<p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<p>Filler</p>
<p>Filler</p>
</div>
</div>

Chúc may mắn ;)