BIGtheme.net http://bigtheme.net/ecommerce/opencart OpenCart Templates

Thiết kế web html có layout dẻo

Có một số bạn hỏi mình cách làm sao để khi tăng nội dung trong phần content thì phần footer tự động đẩy xuống dưới. Nay mình làm đoạn hướng dẫn này, các bạn xem qua.

thiết kế web

Phần code HMTL

Thiết kế web

Phần CSS

thiết kế web

Mình giải thích một số code ở trên:
min-height: Đây là giá trị nhỏ nhất, khi không có nội dung thì trang web vẫn có độ cao theo ý muốn. Nó sẽ nhận giá trị này làm độ cao.
div { clear:both} : Với thuộc tính Clear:both, nó luôn nằm sát dưới 2 div leftpanel và rightpanel dù cho độ cao của chúng có thay đổi bao nhiêu đi nữa. Div #contetn của chúng ta lại đặt bao hàm cả div #clear nên khi div #clear bị div #leftpanel hoặc #rightpanel đẩy xuống thì #content cũng phải tăng độ cao theo. Lúc này #content sẽ đẩy #footer đi xuống.
Một số chú ý: Các bạn có thể không cần đặt poisitinon cho các div trên mà sử dụng padding và margin để định vị. Tuyệt đối không đặt position là absolute

3 comments

  1. em chưa hỏi anh đã trả lời rồi. em cảm ơn anh, cho em hỏi thêm là cái leftpanel với right sao ko đặt top, left,…. mà lại là float, khi có nhiều hơn 2 cột thì sao ạ.

  2. Hoàng Trung Thông

    các thành phần mặc định trong html sẽ là trôi nổi. Thành phần nào nằm trên sẽ trôi lên trên, ap dụng float sẽ xác định được điều đó. Áp dụng thuộc tính này vào thì phền left tự dồn sang phải, sẽ chừa ra phần còn trống bên phải sẽ dành cho right.

  3. You’ve really impressed me with that answer!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>