ทำไมความสูงไม่ถึง 100% ในการขยาย divs ให้เป็นความสูงของหน้าจอ

295

ฉันต้องการม้าหมุน DIV (s7) เพื่อขยายความสูงของหน้าจอทั้งหมด ฉันไม่รู้ว่าทำไมมันถึงไม่สำเร็จ หากต้องการดูหน้าเว็บที่คุณสามารถไปที่นี่

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

ขยายตัวอย่างข้อมูล

html css height

— เอิร์ลลาร์สัน
แหล่งที่มา

2

นี่คือคำอธิบายที่ง่ายและชัดเจน: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

อาจจะเป็นทางออกที่ดีที่สุดสำหรับองค์ประกอบที่ซ้อนกันที่ไม่ควรยืดไปที่หน้าต่างทั้งความสูง stackoverflow.com/questions/7049875/height-100-not-working/...

— B-Gangster

410

เพื่อให้ค่าเปอร์เซ็นต์ทำงานได้สูงต้องกำหนดความสูงของพาเรนต์ ข้อยกเว้นเพียงอย่างเดียวคือองค์ประกอบราก<html>ซึ่งสามารถเป็นความสูงร้อยละ .

ดังนั้นคุณได้กำหนดความสูงขององค์ประกอบทั้งหมดยกเว้น<html>สิ่งที่คุณควรทำคือเพิ่มสิ่งนี้:

html {
    height: 100%;
}

และรหัสของคุณควรทำงานได้ดี

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

ขยายตัวอย่างข้อมูล

ตัวอย่าง JsFiddle

— ผีของมาดาระ
แหล่งที่มา

23

ตกลงดังนั้นนี้อาจทำให้ฉันดูโง่อย่างไม่น่าเชื่อ แต่สิ่งที่ : คุณหมายถึงว่า<html>เป็นจริงองค์ประกอบ - เช่นเดียว<p>หรือ<img />? ฉันคิดว่าจุดประสงค์เพียงอย่างเดียว<html>คือการกำหนดจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร HTML ฉันหมายถึงฉันคิดว่ามันอยู่ที่นั่นไม่ใช่รูปแบบ แต่เพื่อให้เบราว์เซอร์รู้ว่าเอกสารประเภทใดที่กำลังดูอยู่ ฉันปลื้มใจอย่างสมบูรณ์

— jay_t55

29

@Joey: HTML เป็นองค์ประกอบที่แท้จริง คุณสามารถจัดรูปแบบด้วย CSS เชื่อมโยงเหตุการณ์ใน JavaScript เพิ่มคลาสและรหัสไปที่และจะปรากฏใน DOM เบราว์เซอร์จะถือว่าเอกสาร HTML แม้ไม่มี<html>แท็กและแม้ไม่มีองค์ประกอบ<head>หรือ <body>อย่างไรก็ตามข้อกำหนดของ HTML ถือว่า<html>แท็กบังคับ ในระยะสั้นใช่มันเป็นองค์ประกอบที่เต็มเปี่ยมเช่นองค์ประกอบ HTML อื่น ๆ ทั้งหมด

— Ghost ของ Madara

1

@SecondRikudo: ไม่<html>แท็กเป็นตัวเลือกตามข้อกำหนด (เช่น HTML4 และ HTML5) และใช่องค์ประกอบจะถูกสร้างขึ้น

— Robert Siemer

2

hmmm ... สำหรับฉันวิธีเดียวที่งานนี้คือการตั้งค่าทั้งสองhtmlและbodyเป็นheight: 100%(รวมทั้งแน่นอนdivฉันต้องการที่จะสืบทอดความสูง 100%)

— James

1

@james ใช่ผู้ปกครองทุกคนต้องมีความสูงที่รู้จัก

— ผีของมาดาราระ

147

_{เนื่องจากไม่มีใครพูดถึงเรื่องนี้ ..}

วิธีการที่ทันสมัย:

เป็นอีกทางเลือกหนึ่งในการตั้งค่าความสูงhtml/ bodyองค์ประกอบของทั้งสอง100%คุณสามารถใช้ความยาววิวพอร์ต - เปอร์เซ็นต์:

5.1.2 ความยาวเปอร์เซ็นต์ของวิวพอร์ต: หน่วย 'vw', 'vh', 'vmin', 'vmax'

ความยาวร้อยละ viewport มีความสัมพันธ์กับขนาดของบล็อกเริ่มต้นที่มี เมื่อความสูงหรือความกว้างของบล็อกเริ่มต้นที่มีการเปลี่ยนแปลงพวกเขาจะถูกปรับขนาดตาม

ในตัวอย่างนี้คุณสามารถใช้ค่า100vh(ซึ่งก็คือความสูงของวิวพอร์ต) - (ตัวอย่าง)

body {
    height: 100vh;
}

การตั้งค่าmin-heightยังใช้งานได้ (ตัวอย่าง)

body {
    min-height: 100vh;
}

หน่วยงานเหล่านี้ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยที่สุด - การสนับสนุนสามารถพบได้ที่นี่

— Josh Crozier
แหล่งที่มา

1

ฉันไม่เห็นประโยชน์ใด ๆ เลย มันไม่ได้สร้างงานพิเศษสำหรับเบราว์เซอร์ที่ต้องการคำนวณทุกอย่างที่เกี่ยวข้องกับวิวพอร์ตของเบราว์เซอร์ใช่ไหม การปรับขนาดวิวพอร์ตจะมีประโยชน์เมื่อคุณต้องการปรับขนาดบางสิ่งที่เกี่ยวข้องกับความสูงของเบราว์เซอร์เท่านั้น

— Robert Went

12

@RobertWent มีประโยชน์มากมาย ตัวอย่างเช่นheight: 100%ทำงานเฉพาะในกรณีที่องค์ประกอบหลักมีความสูงที่กำหนดไว้ มีบางกรณีที่ผู้ปกครองขององค์ประกอบไม่มีความสูงที่กำหนดและหน่วยเปอร์เซ็นต์ของวิวพอร์ตแก้ไขได้ กล่าวอีกนัยหนึ่งถ้าคุณมีองค์ประกอบซ้อนกันอย่างลึกคุณสามารถตั้งค่า100vhได้และมันจะมีความสูงของ100%เบราว์เซอร์ คุณอาจไม่เห็นประโยชน์ใด ๆ แต่ฉันได้รับในหลายกรณีที่พวกเขาเป็นทางออกเดียว หน่วยเหล่านี้อาจไม่เป็นประโยชน์สำหรับองค์ประกอบของรากเช่นhtml/ bodyแต่อย่างไรก็ตามนี่เป็นทางเลือก

— Josh Crozier

2

แต่เรากำลังพูดถึงองค์ประกอบของร่างกายไม่ใช่องค์ประกอบที่ซ้อนกันอย่างล้ำลึก มีองค์ประกอบหลักที่เป็นไปได้เพียงรายการเดียวคือองค์ประกอบ HTML นี่คือเหตุผลที่ฉันบอกว่าฉันไม่เห็นประโยชน์และอาจแย่กว่าการตั้งค่า 100% ความคิดเห็นของคุณไม่ว่าอะไรจะทำให้ฉันผอม เพียงเพราะสิ่งใหม่ไม่ได้ทำให้ดีขึ้น มันเป็นทางเลือก

— Robert Went

4

ปัญหาเกี่ยวกับวิธีการนี้คือ iPhones ไม่รวมแถบที่อยู่และการนำทางด้านล่างจากความสูงของมุมมองซึ่งหมายความว่าbody { height: 100vh }จะมีแถบเลื่อนในการโหลดหน้าแรก

— BHOLT

2

ดี ฉันลองใช้วิธีอื่นฉันใส่height: 100% !important" to each parent til html` ไม่สำเร็จฉันเห็นใน dom ว่าทุกโหนดของต้นไม้เป็นจริง100%แต่ฉันไม่สามารถจัดการตั้ง 100% ในองค์ประกอบที่ต้องการ แต่ด้วยสไตล์วิวพอร์ตนั้นง่าย

— pmiranda

25

คุณจะต้องตั้งค่าความสูง 100% ในhtmlองค์ประกอบ:

html { height:100%; }

— shanethehat
แหล่งที่มา

20

หรือถ้าคุณใช้position: absoluteก็height: 100%จะใช้ได้ดี

— Steve Tauber
แหล่งที่มา

4

จะเป็นการแก้ไขที่ดีถ้าฉันไม่ได้ใช้ flexbox เพื่อสร้างเค้าโครงของฉัน : /

— แลนดอนโทร

2

อย่าลืมให้ชุดและผู้ปกครองwidth:100%; position:relative;

— Kai Noack

8

คุณควรลองกับองค์ประกอบหลัก

html, body, form, main {
    height: 100%;
}

จากนั้นจะเพียงพอ:

#s7 {
   height: 100%;
}

— mrbengi
แหล่งที่มา

5

ตัวอย่างเช่นหากคุณต้องการคอลัมน์ซ้าย (ความสูง 100%) และเนื้อหา (ความสูงอัตโนมัติ) คุณสามารถใช้สัมบูรณ์:

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

ใน html:

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

— YellowMart
แหล่งที่มา

2

สิ่งนี้อาจไม่เหมาะ แต่คุณสามารถทำได้ด้วย javascript หรือในกรณีของฉัน jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

— obo
แหล่งที่มา

5

ไม่ควรใช้ javascript เมื่อ css เพียงอย่างเดียวจะพอเพียง

— Bosworth99

1

ทำไมถึงทำสิ่งนี้และทำให้มันซับซ้อนเกินควร ฉันไม่เข้าใจคำตอบบางฮ่า ๆ ...

— CapturedTree

1

ในแหล่งหน้าฉันเห็นต่อไปนี้:

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

หากคุณใส่ค่าความสูงในแท็กมันจะใช้สิ่งนี้แทนความสูงที่กำหนดไว้ในไฟล์ css

— สตีเว่น
แหล่งที่มา

มันแปลกเพราะนี่คือสิ่งที่ฉันเห็นในแหล่งที่มาของหน้า: <div class = "holder"> <tr> <td> <div id = "s7"> <div id = "โพสต์">

— Earl Larson

ตกลงในขณะที่ฉันไม่ทราบว่าคุณได้รับโค้ดด้านบนอย่างไรฉันเข้าไปข้างในและเปลี่ยน <div id = "s7"> เป็น <div id = "s7" style = "height: 100%;"> และมันใช้งานได้ บางทีมันอาจซ่อนอะไรบางอย่างจากฉัน ขอบคุณทั้งสองวิธี :)

— Earl Larson

1

หากคุณวางตำแหน่งองค์ประกอบภายใน div อย่างแน่นอนคุณสามารถตั้งค่าการเสริมด้านบนและด้านล่างเป็น 50%

ดังนั้นสิ่งนี้:

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

— Keith Brown
แหล่งที่มา

1

ฉันไม่เห็นวิธีการนี้สามารถใช้งานได้เนื่องจาก 50% สัมพันธ์กับความกว้างไม่ใช่ความสูงขององค์ประกอบที่มีหรือฉันขาดอะไรบางอย่างที่นี่

— DrLightman

0

นี่เป็นวิธีการแก้ปัญหาอื่น ๆ html, body, .blah { height: 100% }สำหรับคนที่ไม่ต้องการที่จะใช้

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

ขยายตัวอย่างข้อมูล

— TheMisir
แหล่งที่มา