10/10/2018, 10:53

Cân bằng chiều cao giữa các thẻ div

các bạn cho mình hỏi tí.
Mình đang giàn html sữ dụng div và css mình đang thắc mắc chỗ này

web mình có 3 cột left,body,right

left mình đặt background là một hình (left.gif)
body mình đặt background là một hình (body.gif)
right mình đặt background là một hình (right.gif)

Giờ mình muốn khi nội dung ở phần body dài ra(hình nền của body(body.gif) tất nhiên dài ra theo) thì hình nền của phần left(left.gif) và phần right (right.gif)cũng dài ra bằng với hình nền của phần body(body.gif).

Các bạn giúp mình nhé

manhkhanh viết 12:55 ngày 10/10/2018

sao không gộp chung 3 ảnh làm 1 nhỉ .

Sau đó cho 1 cái div bao ngoài 3 thẻ đó và trong cái div đó sử dụng ảnh mà bạn đã gộp chung.

Bạn làm theo cách đó đơn giản hơn .

Còn cách của bạn làm CSS thông thường ko làm được

honnhienh viết 13:02 ngày 10/10/2018

mình nhớ là có cái thuộc tinh overflow gì đó để làm cái này.

ngoc_viet08 viết 12:55 ngày 10/10/2018

css làm dc nhưng rất lằng nhằng . cứ 1 image 3 cột mà làm cho lẹ

meoconnho viết 13:04 ngày 10/10/2018

TỚ hướng dẫn qua cậu làm như sau nha :
Left ..body ..right .. cậu làm 3 div . Thuộc tính cậu quy định bên style.css. Bên css có thuộc tính background-repeat.... . THuộc tính này sẽ làm cho ảnh lặp ( tăng lên ) nếu nội dung của các div tăng lên. Và tất nhiên trong đó có các kiểu lặp khác nhau.
Chúc bạn thành công .

songvedau viết 13:06 ngày 10/10/2018

Được gửi bởi tuanhaikh

làm 3 div: div_left, div_body, div_right (ko định cố định height hoặc nếu muốn bạn đặt min-height)
cả 3 div này đều đặt background-repeat:repeat-y
3 div này được đặt chung trong một div giả sử là div_container
và style của div_container bạn nhớ đặt thuộc tính display:inline-block
như vậy chắc ok đó bạn

vvthong viết 13:04 ngày 10/10/2018

Ngoài cách đặt độ cao cho div thì hình như ít có giải pháp hoàn hảo cho vấn đề này.
Khi nội dung trong phần body dài ra mà nội dung các phần còn lại quá ngắn (ý tớ là ngắn hơn phần body) thì chiều cao các thể div sẽ khác nhau.

Đến giờ tớ vẫn không tìm ra cách giải quyết vấn đề này.

thuyduongcd viết 12:55 ngày 10/10/2018

Code:

<html>
<head>
   <script language="javascript">
   function resizediv(){
     var h=0;
     var h1=document.getElementById("left").clientHeight;
     var h2=document.getElementById("body").clientHeight;
     var h3=document.getElementById("right").clientHeight;
     if (h2>h1){ var h=h2; }else{ var h=h1}
     if (h3>h){ h=h3; }
     document.getElementById("left").style.height=h+"px";
     document.getElementById("body").style.height=h+"px";
     document.getElementById("right").style.height=h+"px";

   }
</script>
</head>
<body onload="resizediv()">
<div id="left" style="width:100px;float:left;background-color:#2255aa">
left<br>left
</div>
<div id="body" style="width:200px;float:left;background-color:#8855aa">
body<br>body<br>body<br>body<br>body<br>
</div>
<div id="right" style="width:80px;float:left;background-color:#448822">
right<br>right
</div>
</body>
</html>

songvedau viết 13:03 ngày 10/10/2018

Được gửi bởi thuyduongcd

Code:

<html>
<head>
   <script language="javascript">
   function resizediv(){
     var h=0;
     var h1=document.getElementById("left").clientHeight;
     var h2=document.getElementById("body").clientHeight;
     var h3=document.getElementById("right").clientHeight;
     if (h2>h1){ var h=h2; }else{ var h=h1}
     if (h3>h){ h=h3; }
     document.getElementById("left").style.height=h+"px";
     document.getElementById("body").style.height=h+"px";
     document.getElementById("right").style.height=h+"px";

   }
</script>
</head>
<body onload="resizediv()">
<div id="left" style="width:100px;float:left;background-color:#2255aa">
left<br>left
</div>
<div id="body" style="width:200px;float:left;background-color:#8855aa">
body<br>body<br>body<br>body<br>body<br>
</div>
<div id="right" style="width:80px;float:left;background-color:#448822">
right<br>right
</div>
</body>
</html>

javascript thì giải quyết vấn đề này ngon lành rồi. chuẩn
nhưng vấn đề này đưa lên thảo luận cho vui vậy chứ thực tế có mấy ai cần 3 box ấy luôn bằng nhau làm j.

thuyduongcd viết 12:53 ngày 10/10/2018

Đưa lên cho chủ topic tham khảo vậy thôi

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

tuanhaikh

0 chủ đề

0 bài viết

Tác giả nổi bật