CSS ความสูง 100% พร้อมช่องว่างภายใน / ขอบ

813

ด้วย HTML / CSS ฉันจะสร้างองค์ประกอบที่มีความกว้างและ / หรือความสูงที่ 100% ขององค์ประกอบหลักได้อย่างไรและยังมีช่องว่างภายในหรือระยะขอบที่เหมาะสม

โดย "เหมาะสม" ฉันหมายความว่าหากองค์ประกอบหลักของฉัน200pxสูงและฉันระบุheight = 100%ด้วยpadding = 5pxฉันคาดหวังว่าฉันควรได้รับ190pxองค์ประกอบที่สูงborder = 5pxในทุกด้านโดยมีศูนย์กลางอยู่ที่องค์ประกอบหลัก

ตอนนี้ฉันรู้แล้วว่านั่นไม่ใช่วิธีที่ตัวแบบกล่องมาตรฐานระบุว่าควรจะทำงานได้อย่างไร (แม้ว่าฉันอยากจะรู้ว่าเพราะอะไร ... ) ดังนั้นคำตอบที่ชัดเจนจึงไม่ทำงาน:

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

แต่สำหรับฉันแล้วดูเหมือนว่าจะต้องมีวิธีการสร้างผลกระทบนี้อย่างน่าเชื่อถือสำหรับผู้ปกครองที่มีขนาดตามอำเภอใจ ไม่มีใครรู้วิธีที่จะบรรลุภารกิจนี้ (ดูเหมือนง่าย ๆ ) หรือไม่?

โอ้และสำหรับบันทึกฉันไม่ได้สนใจเรื่องความเข้ากันได้กับ IE มากนัก (หวังว่า) จะทำให้สิ่งต่าง ๆ ง่ายขึ้น

แก้ไข:เนื่องจากตัวอย่างถูกถามนี่คือสิ่งที่ง่ายที่สุดที่ฉันคิดได้:

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

ความท้าทายคือการนำกล่องดำมาแสดงด้วยการเติมเต็มขนาด 25 พิกเซลบนทุกขอบโดยไม่มีการขยายหน้าใหญ่พอที่จะต้องใช้แถบเลื่อน

css 
— Toji
แหล่งที่มา
ฉันพบว่าโซลูชันทั้งสองนี้น่าเชื่อถือมากที่สุด: http://www.xs4all.nl/~peterned/examples/csslayout1.html http://themaninblue.com/experiment/footerStickAlt/คุณมี HTML ที่เฉพาะเจาะจงหรือไม่ เราสามารถเห็นและเล่นด้วย?
— Nick Presta
— เบน

คำตอบ:

755

ฉันเรียนรู้วิธีทำสิ่งต่าง ๆ เหล่านี้ที่อ่าน " PRO HTML และ CSS Design Patterns " display:blockเป็นค่าการแสดงผลเริ่มต้นสำหรับdivแต่ผมชอบที่จะทำให้มันชัดเจน คอนเทนเนอร์ต้องเป็นชนิดที่ถูกต้อง positionแอตทริบิวต์fixed, หรือrelativeabsolute

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}
<div class="stretchedToMargin">
  Hello, world
</div>
ขยายตัวอย่างข้อมูล

Fiddleตามความคิดเห็นของ Nooshu

— Frank Schwieterman
แหล่งที่มา
42
ทางออกที่ยอดเยี่ยมจะทำการคั่นหน้านี้ เพิ่งเพิ่มเข้าไปในjsfiddle.net/Rpdr9อย่างรวดเร็วสำหรับทุกคนที่ต้องการการสาธิตสด หวังว่าคุณจะไม่รังเกียจ
— Nooshu
16
ในขณะที่ @Toji ไม่สนใจความเข้ากันได้ของ IE แต่ฉันก็ต้องทำ วิธีนี้ไม่ได้ทำงานภายใต้ IE6 ในตอนแรก การเพิ่มIE9.js Dean Edwards ไปยังหน้าทำให้การทำงานนี้ ตอนนี้ผมก็ต้องหวังและภาวนาว่าญาติตำแหน่ง / แน่นอนไม่ได้กรูกับสิ่งที่อยู่ในองค์ประกอบลูก ...
— คริสโตปาร์กเกอร์
24
-1 (แม้ว่าดูเหมือนว่าฉันเป็นชนกลุ่มน้อยที่นี่: P) นี่ถือว่ากล่องสามารถอยู่ในตำแหน่งที่แน่นอน; ผู้คนใช้มากเกินไป pos: abs เหมือนเดิมพวกเขาไม่ต้องการกระสุนนี้ ใช้ตัวอย่างนี้: div "พาเนล" ที่มีหลายระดับของ "พาเนล" อยู่ข้างใน "panels" มี {ล้น: ซ่อนอยู่; height: 300px;} และ "panel" มีเนื้อหา / เนื้อหาความสูงต่างกันโดยมี {border: # 000 solid 1px; ลอย: ด้านซ้าย; ขอบขวา: 10px;} ทำให้ "แผง" สูงทั้งหมดของ "แผง" โดยไม่สูญเสียเส้นขอบที่จุดใด ๆ div "panel" ไม่สามารถ pos: abs'd ที่นี่ แต่โซลูชันของ @ Marco นั้นใช้ได้กับสถานการณ์นี้
— นิรันดร์
8
โอ้ว้าวฉันเข้าใจแล้ว top:0, bottom:0หลัก "ยืด" ออกจากองค์ประกอบ ฉันเท่านั้นที่จะได้รับมันในการทำงานกับposition:absoluteแม้ว่า
— แมตต์
7
คุณไม่สามารถทำได้top:20px;bottom:20px;left:20px;right:20px;แทนที่จะใช้มาร์จิ้นเลยใช่ไหม
— chowey
391

มีคุณสมบัติใหม่ใน CSS3ที่คุณสามารถใช้เพื่อเปลี่ยนวิธีที่แบบจำลองกล่องคำนวณความกว้าง / ความสูงเรียกว่าการปรับขนาดกล่อง

ด้วยการตั้งค่าคุณสมบัตินี้ด้วยค่า "border-box" มันทำให้องค์ประกอบใดก็ตามที่คุณใช้มันไม่ยืดเมื่อคุณเพิ่มช่องว่างภายในหรือชายแดน หากคุณกำหนดบางสิ่งด้วยความกว้าง 100px และการขยาย 10px มันจะยังคงเป็นความกว้าง 100px

box-sizing: border-box;

ดูที่นี่สำหรับการสนับสนุนเบราว์เซอร์ มันใช้งานไม่ได้กับ IE7 และที่ต่ำกว่า แต่ฉันเชื่อว่าIE7.jsของ Dean Edward จะเพิ่มการรองรับ สนุก :)

— มาร์โกจาร์ดิม
แหล่งที่มา
45
ที่สุด! ฉันรอคุณสมบัติที่แน่นอนนี้มาประมาณ 10 ปีแล้ว Pity IE7 ไม่รองรับ แต่ฉันคิดเสมอว่าคนที่ยังคงใช้ IE ไม่สมควรได้รับเลย์เอาต์ที่สวยงาม
— cronoklee
2
สิ่งนี้ใช้ได้กับเบราว์เซอร์เริ่มต้นของ iPhone / Safari และ Android สำหรับฉันในขณะที่โซลูชันด้านบนไม่สามารถใช้งานได้
— Spud
18
สิ่งนี้เป็นพื้นฐานเช่นเดียวกับรูปแบบกล่องโหมดแปลก ๆของ IE ฉันคิดว่ามันตลกว่าเกลียดทุกคนใน IE เลยตอนนี้border-boxเป็นฮีโร่ของทุกคน :)
— แมตต์เกรียร์
14
FYI ส่วนนำหน้าของเบราว์เซอร์สำหรับการปรับขนาดกล่องจะถูกลบไปทั้งหมดยกเว้น -moz ดูpaulirish.com/2012/box-sizing-border-box-ftwและความคิดเห็นสำหรับการสนทนาที่ดี
— aponzani
3
ใช่ นี่คือคำตอบที่ถูกต้อง! ตอนนี้ความสูง 100% ปรับขนาดสิ่งต่าง ๆ ได้อย่างถูกต้องเมื่อเทียบกับพ่อแม่ จะให้ +1 เป็นล้านถ้าทำได้
— Andrew Mao
65

ทางออกคือไม่ใช้ความสูงและความกว้างเลย! แนบกล่องด้านในโดยใช้ด้านบนซ้ายขวาล่างจากนั้นเพิ่มระยะขอบ

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}
<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>
ขยายตัวอย่างข้อมูล

— amolk
แหล่งที่มา
6
โหวตขึ้นเพราะคุณถูกต้องในทางเทคนิค แต่โดยทั่วไปแล้วมันก็เป็นคำตอบเดียวกับแฟรงค์ (ซึ่งฉันคิดว่าเป็นมิตรกับเบราว์เซอร์ที่ไม่มีตัวตนออกไป)
— Toji
39

วิธีที่ดีกว่าคือด้วยคุณสมบัติ calc () ดังนั้นกรณีของคุณจะมีลักษณะดังนี้:

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

ง่ายสะอาดไม่มีวิธีแก้ไขปัญหา เพียงให้แน่ใจว่าคุณไม่ลืมช่องว่างระหว่างค่าและผู้ประกอบการ (เช่น(100%-5px)ที่จะทำลายไวยากรณ์สนุก!

— Brian Aderer
แหล่งที่มา
6
ทางออกที่ดี เพียงจำไว้ว่าให้ตรวจสอบการสนับสนุนเบราว์เซอร์: ฉันสามารถใช้ Calc ()
— Brett Postin
5
สิ่งนี้จะไม่ให้ความกว้างและความสูง 100% กับการเพิ่มแต่ละบวก 5px เนื่องจากการเติมจะทำให้องค์ประกอบ 10px กว้างขึ้นและใหญ่ขึ้นตามลำดับหรือไม่
ในที่สุดวิธีการแก้ปัญหาที่ดีและไม่ชอบส่วนที่เหลือของพวกเขามีคุณด้านบนขวาล่างและซ้ายเป็น 0 ที่จะทำงานเฉพาะกับตำแหน่ง: แน่นอน;
— Gil Epshtain
ฉันคิดว่าถูกต้องคือ: #myDiv {width: calc (100% - 10px); ความสูง: Calc (100% - 10px); การขยาย: 5px; } 5 จากซ้ายและ 5 จากขวา = 10, 5 จากด้านบนและ 5 จากด้านล่าง = 10
— Chris P
21

ตามความสูงของข้อมูลจำเพาะ w3c หมายถึงความสูงของพื้นที่ที่สามารถดูได้เช่นบนจอภาพความละเอียด 1280x1024 พิกเซลความสูง 100% = 1024 พิกเซล

ความสูงขั้นต่ำหมายถึงความสูงทั้งหมดของหน้าเว็บรวมถึงเนื้อหาดังนั้นในหน้าเว็บที่เนื้อหามีขนาดใหญ่กว่า 1024px ความสูงต่ำสุด: 100% จะขยายรวมเนื้อหาทั้งหมด

ปัญหาอื่น ๆ ก็คือว่าการเติมและขอบจะถูกเพิ่มเข้าไปในความสูงและความกว้างในเบราว์เซอร์ที่ทันสมัยส่วนใหญ่ยกเว้น ie6 (ie6 นั้นค่อนข้างมีเหตุผล แต่ไม่สอดคล้องกับสเป็ค) สิ่งนี้เรียกว่าแบบจำลองกล่อง ดังนั้นหากคุณระบุ

min-height: 100%;
padding: 5px;

มันจะให้ความสูง 100% + 5px + 5px เพื่อหลีกเลี่ยงปัญหานี้คุณต้องใช้ภาชนะบรรจุอาหาร

<style>
    .FullHeight { 
       height: auto !important; /* ie 6 will ignore this */
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
    }

    .Padded {
       padding: 5px;
    }
</style>

<div class="FullHeight">
   <div class="Padded">
      Hello i am padded.
   </div
</div>
— อเล็กซ์
แหล่งที่มา
4
@Alex: แต่สิ่งที่ทำให้ div ภายใน (เบาะเสริม) 100% ของส่วนสูง div ด้านนอก ประสบการณ์ของฉันได้รับว่าคุณเพิ่งได้รับ div สั้น ๆ เล็กน้อยใน div สูงเต็ม
— Lawrence Dol
8

1. เต็มความสูงด้วย padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>
ขยายตัวอย่างข้อมูล

2. เต็มความสูงด้วย margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}
<div class="container">Hello world.</div>
ขยายตัวอย่างข้อมูล

3. เต็มความสูงด้วย border

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>
ขยายตัวอย่างข้อมูล

— สติกเกอร์
แหล่งที่มา
7

นี่เป็นหนึ่งในความโง่เขลาที่สมบูรณ์ของ CSS - ฉันยังไม่เข้าใจเหตุผล (ถ้ามีคนรู้กรุณาอธิบาย)

100% หมายถึง 100% ของความสูงของตู้คอนเทนเนอร์ - ซึ่งจะเพิ่มระยะขอบ, เส้นขอบและช่องว่างภายในใด ๆ ดังนั้นจึงเป็นไปไม่ได้อย่างมีประสิทธิภาพที่จะได้รับภาชนะบรรจุที่เติมมันเป็นแม่และที่มีระยะขอบชายแดนหรือช่องว่างภายใน

โปรดทราบว่าการตั้งค่าความสูงนั้นไม่สอดคล้องกันอย่างมากระหว่างเบราว์เซอร์เช่นกัน

อีกสิ่งหนึ่งที่ฉันได้เรียนรู้ตั้งแต่ฉันโพสต์ข้อความนี้คือเปอร์เซ็นต์นั้นสัมพันธ์กับความยาวของคอนเทนเนอร์นั่นคือความกว้างของมันทำให้เปอร์เซ็นต์สูงกว่าความสูง

ทุกวันนี้ยูนิตวิวพอร์ต vh และ vw มีประโยชน์มากกว่า แต่ก็ไม่ได้มีประโยชน์สำหรับสิ่งอื่นใดนอกจากคอนเทนเนอร์ระดับบนสุด

— Lawrence Dol
แหล่งที่มา
ไม่มีเหตุผลอะไรเกิดขึ้นเมื่อเบราว์เซอร์เริ่มรวมตัวเข้าหาพฤติกรรมที่สอดคล้องกัน ลองอ่านหนังสือที่กล่าวถึงในคำตอบของฉัน
— Frank Schwieterman
โหวตขึ้นสำหรับการใช้คำที่ถูกต้อง เท็กซ์และผู้จัดการเลย์เอาต์ที่ฉันเห็นถูกต้องแค่ CSS ต้องพิเศษ
— maaartinus
5

อีกวิธีคือใช้จอแสดงผล: ตารางซึ่งมีลักษณะการทำงานแบบกล่องแตกต่างกัน

คุณสามารถตั้งค่าความสูงและความกว้างเป็นพาเรนต์และเพิ่มการขยายโดยไม่ต้องขยาย เด็กมีความสูงและความกว้าง 100% ลบด้วยการเติมเต็ม

JSBIN

ตัวเลือกอื่นจะใช้ propperty ขนาดกล่อง ปัญหาเฉพาะกับทั้งสองจะเป็นพวกเขาไม่ทำงานใน IE7

— user1721135
แหล่งที่มา
4

โซลูชันอื่น: คุณสามารถใช้หน่วยเปอร์เซ็นต์สำหรับระยะขอบเช่นเดียวกับขนาด ตัวอย่างเช่น:

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

ปัญหาหลักที่นี่คือว่าระยะขอบจะเพิ่ม / ลดลงเล็กน้อยกับขนาดขององค์ประกอบหลัก ฟังก์ชั่นที่คุณต้องการคืออัตรากำไรคงที่และองค์ประกอบลูกจะเติบโต / หดตัวเพื่อเติมเต็มการเปลี่ยนแปลงในระยะห่าง ดังนั้นขึ้นอยู่กับว่าคุณต้องการให้จอภาพแน่นแค่ไหนนั่นอาจเป็นปัญหาได้ (ฉันจะไปด้วยกำไรที่น้อยลงเช่น 0.3%)

— ktbiz
แหล่งที่มา
3

วิธีการแก้ปัญหาด้วยflexbox (ทำงานบน IE11): ( หรือดู jsfiddle )

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

(การรีเซ็ต CSSไม่จำเป็นสำหรับปัญหาจริง)

ส่วนที่สำคัญคือflex: 1(รวมกับdisplay: flexที่ผู้ปกครอง) สนุกมากพอคำอธิบายที่เป็นไปได้มากที่สุดที่ฉันรู้เกี่ยวกับวิธีการทำงานของคุณสมบัติ Flex มาจากเอกสารตอบโต้พื้นเมืองดังนั้นฉันจึงอ้างถึง :

(... ) flex: 1 ซึ่งบอกให้ส่วนประกอบเติมเต็มพื้นที่ว่างทั้งหมดแบ่งให้เท่า ๆ กันระหว่างส่วนประกอบอื่น ๆ ที่มีพาเรนต์เดียวกัน

— Putzi San
แหล่งที่มา
2

ตัวอย่างของแฟรงค์ทำให้ฉันสับสนเล็กน้อย - มันไม่ได้ผลในกรณีของฉันเพราะฉันยังไม่เข้าใจตำแหน่งที่ดีพอ สิ่งสำคัญคือให้สังเกตว่าองค์ประกอบคอนเทนเนอร์หลักจำเป็นต้องมีตำแหน่งที่ไม่คงที่ (เขาพูดถึงสิ่งนี้ แต่ฉันมองข้ามไปและมันไม่ได้อยู่ในตัวอย่างของเขา)

นี่คือตัวอย่างที่เด็ก - กำหนดช่องว่างภายในและเส้นขอบ - ใช้การวางตำแหน่งที่แน่นอนเพื่อเติมเต็มแม่ 100% ผู้ปกครองใช้การจัดตำแหน่งแบบสัมพัทธ์เพื่อให้เป็นจุดอ้างอิงสำหรับตำแหน่งของเด็กในขณะที่ยังคงอยู่ในการไหลปกติ - องค์ประกอบต่อไป "เนื้อหาเพิ่มเติม" ไม่ได้รับผลกระทบ:

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

ลิงค์ที่มีประโยชน์สำหรับการเรียนรู้ตำแหน่ง CSS อย่างรวดเร็ว

— ปีเตอร์เซ่ง
แหล่งที่มา
0

เส้นขอบรอบ div แทนที่จะเป็นขอบหน้ากระดาษ

โซลูชันอื่น - ฉันต้องการเส้นขอบเรียบง่ายรอบ ๆ หน้าของฉันและฉันต้องการความสูง 100% เมื่อเนื้อหามีขนาดเล็กกว่านั้น

กล่องขอบไม่ทำงานและตำแหน่งที่แน่นอนดูเหมือนผิดสำหรับความต้องการง่ายๆ

ฉันลงเอยด้วยการเพิ่มเส้นขอบลงในคอนเทนเนอร์ของฉันแทนที่จะพึ่งขอบของเนื้อความของหน้า - ดูเหมือนว่า:

body, html {
    height: 100%;
    margin: 0;
}

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}
— Kris Randall
แหล่งที่มา
0

นี่เป็นพฤติกรรมเริ่มต้นของdisplay: blockวิธีที่เร็วที่สุดที่คุณสามารถแก้ไขได้ในปี 2020 คือการตั้งค่าdisplay: 'flex'องค์ประกอบหลักและช่องว่างภายในเช่น 20px จากนั้นลูกทุกคนจะมีความสูง 100% เทียบกับความสูง

— Freestyle09
แหล่งที่มา
0

หากต้องการเพิ่ม -webkit และ -moz จะเหมาะสมกว่า

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
— user3113626
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.