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

[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