<div> ทำยังให้ความสูง มันสูงตาม <div>ที่ครอบไว้อ่าครับ

[xmen256k]

โค้ด เลือก ขยาย


<div class="main">
<div class="sub"></div>
</div>


โดยผมลองทำแบบนี้แต่มันไม่ได้อ่าครับ

โค้ด เลือก ขยาย


.main {
height: 500px;
width: 960px;
}
.sub {
float: left;
height: 100%;
width: 50px;
}



มันก็ไม่ยืดตามตัวที่ครอบไว้อ่าครับ

มึนหัวหมดแหละ - -

[bankkungz]

ตรง .sub

ถ้า float ปุ๊บ

มันจะทำให้ contrainer ที่ครอบมันไว้ ไม่มีความสูงครับ

ต้องกำหนดความสูงให้ contrainer ที่ครอบด้วย


หรือไม่ก็ต้อง hack css เอาครับ  (กรณีที่จะทำเป็น กล่อง แล้วมีข้อความอยู่ข้างใน แล้วให้สูงตามข้อความ)

หา code ในเน็ตดูนะครับ

[golfer007]

โค้ด เลือก ขยาย


<div class="main">
<div class="sub"></div>
</div>


โดยผมลองทำแบบนี้แต่มันไม่ได้อ่าครับ

โค้ด เลือก ขยาย


.main {
height: 500px;
width: 960px;
}
.sub {
float: left;
height: 100%;
width: 50px;
}



มันก็ไม่ยืดตามตัวที่ครอบไว้อ่าครับ

มึนหัวหมดแหละ - -

ตรง .sub ใช้

min-height :500px;
max-height:500px;

ได้หรือไม่

[aifarfa]

.main {
height: 500px;
width: 960px;
overflow: auto;
}

[xmen256k]

โค้ด เลือก ขยาย


<div class="main">
<div class="sub"></div>
</div>


โดยผมลองทำแบบนี้แต่มันไม่ได้อ่าครับ

โค้ด เลือก ขยาย


.main {
height: 500px;
width: 960px;
}
.sub {
float: left;
height: 100%;
width: 50px;
}



มันก็ไม่ยืดตามตัวที่ครอบไว้อ่าครับ

มึนหัวหมดแหละ - -

ตรง .sub ใช้

min-height :500px;
max-height:500px;

ได้หรือไม่

ไม่ได้อ่าครับ เพราะผมอยากให้มันยืดตามที่ตัวครอบอ่าครับ แต่มันยาวไม่เท่ากัน แหะๆ

[เป็นติ่งไรเนี่ย]

กําหนด heigh ไว้เเล้ว แล้วมันจะยืดได้งัยหว่า..
ยังสงสัย งี้..ต้องตามท่าน g-ji
มาเเล้วหละคับ...

[xmen256k]

กําหนด heigh ไว้เเล้ว แล้วมันจะยืดได้งัยหว่า..
ยังสงสัย งี้..ต้องตามท่าน g-ji
มาเเล้วหละคับ...

ก็ประมาณว่าอันใหญ่สูงเท่าไหร่ อันข้างในก็ให้มันยืดตามอันใหญ่อัตโนมัติ อ่าครับ ^^

[g-ji]

แล้วไหงไม่ทำให้

ข้างในสูงเท่าไร ข้างนอกก็ยืดตามเท่านั้นล่ะ 

เว้ากันซื่อเลยนะ div ว่างเปล่า มันกำหนดความสูง 100% ไม่ได้

โค้ด เลือก ขยาย


<div class="main">
<div class="sub"></div>
<br class="clear" />
</div>


โค้ด เลือก ขยาย



.main {
height: auto;
width: 960px;
display:block;
margin:0 auto;

}
.sub {
float: left;
height: 500px;
width: 50px;
display:block;
margin:0 auto 0 1%
}
.clear{
clear:both;
}
br[class="clear"]{
line-height:0;
height:0;
}


ลองดูจิได้มั้ย 

ปล. เว็บจี้ก็ใช้แบบนี้แหละ แต่ไม่เคยกำหนดความสูง div สักที

[xmen256k]

คือลักษณะงานที่จะใช้แบบว่ามี <div> อันใหญ่อันนึงคลุมอยู่อ่าครับจากนั้นขางในใน<div>อีก3อันอยู่ ซ้าย กลาง ขวา

แล้วคราวนี้ทั้งสามอันมันยาวไม่เท่ากันอ่าครับ เวลาลงสีมันเลยดูแหว่งๆ ผมก็เลยอยากให้มันเท่ากัน

เพื่อที่จะลงสีอย่างสวยงามอ่าครับ

[headmaster]

ต้องกำหนดเป็น % ครับ มันถึงจะกว้าง ๆ แคบ ๆ ให้
จาก code เห็นเป็น px ยังไง ๆ มันก็จะคงที่ครับผม 

[g-ji]

↑ ถ้าจะทำแบบนั้นจริงๆ แนะนำ

โค้ด เลือก ขยาย

http://www.divland.com/blog/2009/07/01/equal-height-column/#more-432

และ

โค้ด เลือก ขยาย

http://www.divland.com/blog/2007/09/10/css-layout-equal-height/#more-187

อาจจะไม่ตรงเป้าเป๊ะๆ แต่คาดว่าน่าจะใช้ต่อยอดได้นะ



ปล. จี้ไม่เคย Hack CSS เพราะว่ามันวุ่นวาย ปวดหัว แถมเสียสุขภาพจิตอย่างแรง   เบราเซอร์มันมีกี่ตัวกี่รุ่นหว่า แฮคให้แสดงผลเหมือนกันหมด แค่จำ condition tag สำหรับแต่ละเบราเซอร์ก็จะตายแล้ว

[siamwebthai]

style=" height:0 auto;"  << ลองดูครับ

[xmen256k]

style=" height:0 auto;"  << ลองดูครับ

โค้ด เลือก ขยาย


.sub {
height:0 auto;
width: 50px;
background-color:#FFCC00
}



แบบนี้เหรอครับ แต่ผมทำแล้วไม่ได้อ่าครับ

[sittipat]

คุณใช้IE6 เปล่า ถ้าใช้ IE6 ต้องกำหนดความสูงมันด้วย

height:auto; มันใช้ได้กับที่บราวเซอร์ยกเว้น IE6

[ru]

คาถา CSS ท่องก่อนนอน 3 จบทุกวัน

1. โฟลทแล้วอย่าแพด
Float ซ้าย ขวา อย่าใส่ padding นะ IE6 จะคำนวณไม่เหมือนชาวบ้านเค้า ทำให้ระยะพังได้

2. โฟลทแล้วต้องวิด
มี float ต้องมี width ด้วย ไม่งั้น IE6 มึน ส่วน Browser อื่นๆ ก็จะงงได้ เพราะมันต้องคิดว่าจะกว้างเท่าไหร่ดี

3. วิดแล้วอย่าแพด/แพดแล้วอย่าวิด
IE6 เมิงนี่มันเรื่องมากจริงๆ เพราะคิดระยะไม่เหมือนเค้า เช่น padding ซ้าย 10px ขวา 10px กว้าง 100px ใครๆ เค้าก็รู้กันว่า แปลว่าขอบเขตจริงๆ คือ 120px แต่พื้นที่แสดงด้านในแค่ 100px ไอ้ IE6 มันดันคิดว่า ขอบเขตจริงๆ คือ 100px และพื้นที่แสดงด้านใน 80px!!!

วิธีแก้มี 2 แบบ คือ

   * ใส่ _width สำหรับพี่ IE6 เค้าโดยเฉพาะ บวกเลขใหม่ดีๆ ละกัน (คนอื่นเค้าไม่อ่านค่า แต่ IE ดันนึกว่า _width = width) ใส่บรรทัดต่อมานะ เพราะสำหรับ CSS ค่าที่ระบุใหม่ ทับค่าที่ระบุเก่า
   * ใส่ div 2 ชั้น ชั้นนอก "วิดแล้วอย่าแพด" ชั้นใน "แพดแล้วอย่าวิด"

4. โฟลทแล้วต้องอินลาย
สั่ง float แล้ว IE6 จะทำพฤติกรรมประหลาด ให้ display: inline ไว้ด้วย ผิดหลัก แต่แสดงแล้วถูกทุก Browser

5. รีเซ็ท กับ เคลียร์ฟิกและเคลียร์พร้อมใช้
ทำไว้ส่วนเริ่มซะ รีเซ็ทเพื่อความเสมอภาคก่อน ส่วน clearfix และ clear ใส่ไว้ด้วย จะได้เอาไปใช้ในที่ต่างๆ ได้ ดังนั้น เอานี่ไปเป็นตัวเริ่มละกัน style.css (ก๊อบปี้ไปมาผสมจากหลายส่วนของอินเตอร์เน็ท)

6. Text Area กว้างสุด 97% พอ!
ไม่ค่อยเข้าใจนัก แต่คร่าวๆ คือ IE6 มันจะคิด Text Area ที่กว้างเกิน 97% เป็นกว้างเกินไป เกิน 100% อีก ทำให้ทุกอย่างถูกดันและเพี้ยนได้
ดังนั้น Text Area ใน ฟอร์มจึงควรเป็น

#test-form textarea {width: 97%; padding: 2px;}


เครดิต อ.เม่น

[xmen256k]

ขอบคุณมากนะครับสำหรับทุกคำตอบ
แต่ตอนนี้ผมมีวิธีแก้ง่ายๆแล้วครับ
ใช้ table แทน -*-
div ยุ่งยากเกิน
เลยจับ table ยัดเข้าไปแทน

สรุปโอเคเหมือนกันครับ ^^

[daclubb]

.main {zoom:1;}
.main:after {display: block; visibility: hidden; clear: both; height: 0; content: "."; }

[teefouay]

ลองแบบนี้ดูนะ

โค้ด เลือก ขยาย


<div align="left" style="display:block;height:24px;margin-left:5px;"> </div>