เด็กที่อยู่ในผู้ปกครองที่มีความสูงขั้นต่ำ: 100% ไม่ได้รับความสูง

ผมพบว่าวิธีที่จะทำให้ภาชนะ div min-height: 100%;ที่จะครอบครองอย่างน้อยเต็มความสูงของหน้าเว็บโดยการตั้งค่า อย่างไรก็ตามเมื่อฉันเพิ่ม div ที่ซ้อนกันและตั้งค่าheight: 100%;มันจะไม่ยืดความสูงของคอนเทนเนอร์ มีวิธีแก้ไขหรือไม่

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

#containment {
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  height: 100%;
  background: aqua;
}

<div id="containment">
  <div id="containment-shadow-left">
    Hello World!
  </div>
</div>

นี่เป็นข้อผิดพลาด webkit (chrome / safari) ที่รายงานเด็กของผู้ปกครองที่มีความสูงขั้นต่ำไม่สามารถสืบทอดคุณสมบัติความสูงได้: https://bugs.webkit.org/show_bug.cgi?id=26559

เห็นได้ชัดว่า Firefox ได้รับผลกระทบด้วย (ไม่สามารถทดสอบใน IE ในขณะนี้)

วิธีแก้ปัญหาที่เป็นไปได้:

• เพิ่มตำแหน่ง: สัมพันธ์กับ #containment
• เพิ่มตำแหน่ง: สัมบูรณ์ถึง # containment-shadow-left

ข้อผิดพลาดไม่ปรากฏขึ้นเมื่อองค์ประกอบด้านในมีตำแหน่งที่แน่นอน

ดูhttp://jsfiddle.net/xrebB/

แก้ไขเมื่อวันที่ 10 เมษายน 2014

ตั้งแต่ฉันกำลังทำงานในโครงการที่ฉันจริงๆต้องภาชนะผู้ปกครองmin-heightและองค์ประกอบของเด็กสืบทอดความสูงของภาชนะที่ฉันได้บางวิจัยมากขึ้น

ครั้งแรก:ฉันไม่แน่ใจอีกต่อไปว่าพฤติกรรมเบราว์เซอร์ปัจจุบันเป็นข้อผิดพลาดจริง ๆ หรือไม่ รายละเอียด CSS2.1 พูดว่า:

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

ถ้าฉันใส่ความสูงขั้นต่ำลงในคอนเทนเนอร์ของฉันฉันไม่ได้ระบุความสูงอย่างชัดเจน - ดังนั้นองค์ประกอบของฉันควรมีautoความสูง และนั่นคือสิ่งที่ Webkit - และเบราว์เซอร์อื่น ๆ ทำ

ประการที่สองฉันพบวิธีแก้ปัญหา:

ถ้าฉันตั้งค่าองค์ประกอบคอนเทนเนอร์ของฉันdisplay:tableด้วยheight:inheritมันจะทำหน้าที่เหมือนกับวิธีที่ฉันให้min-height100% และ - ที่สำคัญกว่านั้น - ถ้าฉันตั้งค่าองค์ประกอบลูกให้กับdisplay:table-cellมันจะเป็นการสืบทอดความสูงขององค์ประกอบคอนเทนเนอร์ได้อย่างสมบูรณ์ไม่ว่าจะเป็น 100% หรือมากกว่านั้น

CSS เต็มรูปแบบ:

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

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

มาร์กอัป:

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

ดูhttp://jsfiddle.net/xrebB/54/

เพิ่มheight: 1pxลงในคอนเทนเนอร์หลัก ใช้งานได้ใน Chrome, FF, Safari

คิดว่าฉันจะแบ่งปันสิ่งนี้เพราะฉันไม่เห็นสิ่งนี้ทุกที่และเป็นสิ่งที่ฉันใช้ในการแก้ไขปัญหาของฉัน

แนวทางแก้ไข :min-height: inherit;

ฉันมีผู้ปกครองที่มีความสูงขั้นต่ำที่ระบุและฉันต้องการให้เด็กเป็นความสูงนั้นด้วย

.parent {
  min-height: 300px;
  background-color: rgba(255,255,0,0.5); //yellow
}

.child {
  min-height: inherit;
  background-color: rgba(0,255,0,0.5); //blue
}

p {
  padding: 20px;
  color: red;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
}

<div class="parent">
  <div class="child">
    <p>Yellow + Blue = Green :)</p>
  </div>
</div>

วิธีนี้เด็กทำหน้าที่เป็นความสูง 100% ของความสูงขั้นต่ำ

ฉันหวังว่าบางคนจะพบว่ามีประโยชน์ :)

นี่ถูกเพิ่มในความคิดเห็นโดย @jackocnr แต่ฉันพลาดไป สำหรับเบราว์เซอร์ที่ทันสมัยฉันคิดว่านี่เป็นวิธีที่ดีที่สุด

มันทำให้องค์ประกอบภายในเติมทั้งคอนเทนเนอร์ถ้ามันเล็กเกินไป แต่ขยายความสูงของคอนเทนเนอร์ถ้ามันใหญ่เกินไป

#containment {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#containment-shadow-left {
  flex: 1;
}

วิธีการแก้ปัญหาของ Kushagra Gour ทำงาน (อย่างน้อยใน Chrome และ IE) และแก้ปัญหาเดิมโดยไม่ต้องใช้และdisplay: table; display: table-cell;ดูตัวรวบรวมเสียง: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

การตั้งค่าmin-height: 100%; height: 1px;div ภายนอกทำให้ความสูงจริงของมันเป็นอย่างน้อย 100% ตามที่ต้องการ นอกจากนี้ยังช่วยให้ div ด้านในสืบทอดความสูงได้อย่างถูกต้อง

นอกเหนือจากคำตอบที่มีอยู่แล้วยังมีหน่วยวิวพอร์ตที่vhจะใช้ ตัวอย่างข้อมูลด้านล่าง แน่นอนว่ามันสามารถใช้ร่วมกันได้calc()เช่นกันเช่นmin-height: calc(100vh - 200px);เมื่อส่วนหัวของหน้าและท้ายกระดาษมี200pxความสูงร่วมกัน

body {
  margin: 0;
}

.child {
  min-height: 100vh;
  background: pink;
}

<div class="parent">
  <div class="child"></div>
</div>

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

ดูเหมือนว่าข้อมูลจำเพาะ CSS 2.1 จะแนะนำ: http://www.w3.org/TR/CSS2/visudet.html#the-height-property

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

ดังนั้นเนื่องจากmin-heightผู้ปกครองไม่มีheightชุดคุณสมบัติที่ชัดเจนจึงมีค่าเริ่มต้นเป็นอัตโนมัติ

มีหลายวิธีที่อาจเกิดขึ้นได้โดยการใช้display: table-cellหรือสไตล์ที่ใหม่กว่าเช่น flexbox หากเป็นไปได้สำหรับเบราว์เซอร์ของกลุ่มเป้าหมายของคุณ นอกจากนี้คุณยังสามารถโค่นล้มสิ่งนี้ในบางสถานการณ์โดยใช้topและbottomคุณสมบัติบนองค์ประกอบภายในที่มีตำแหน่งสูงซึ่งจะให้ความสูง 100% โดยไม่ต้องระบุ

แม้ว่าจะdisplay: flex;ได้รับการแนะนำที่นี่ให้พิจารณาใช้display: grid;ในขณะนี้ว่ามันได้รับการสนับสนุนอย่างกว้างขวาง โดยค่าเริ่มต้นลูกคนเดียวของกริดจะเติมเต็มพาเรนต์ทั้งหมด

html, body {
  height: 100%;
  margin: 0;
  padding: 0; /* Don't forget Safari */
}

#containment {
  display: grid;
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  background: aqua;
}

สำหรับ googler:

วิธีแก้ปัญหา jquery-work นี้ทำให้ #container ได้รับความสูงโดยอัตโนมัติ (ตามความสูง: อัตโนมัติ) จากนั้นรับความสูงจริงที่กำหนดเป็นค่าพิกเซล

<script type="text/javascript">
<!--
    $(function () {

        // workaround for webkit-bug http://stackoverflow.com/a/8468131/348841

        var rz = function () {
            $('#containment')
            .css('height', 'auto')
            .css('height', $('#containment').height() + 'px');
        };

        $(window).resize(function () {
            rz();
        });

        rz();

    })
-->
</script>

display: flex;วิธีที่ดีที่สุดเพื่อให้บรรลุนี้ในปัจจุบันคือการใช้ อย่างไรก็ตามคุณอาจพบปัญหาเมื่อพยายามรองรับ IE11 ตามhttps://caniuse.comโดยใช้ flexbox:

IE 11 ไม่ได้จัดแนวรายการอย่างถูกต้องเมื่อใช้ความสูงขั้นต่ำ

โซลูชันที่เข้ากันได้กับ Internet Explorer

การแก้ปัญหาคือการใช้display: table;ในแม่และdisplay: table-row;เด็กทั้งสองที่มีแทนสำหรับheight: 100%;min-height: 100%;

ส่วนใหญ่ของการแก้ปัญหาอยู่ที่นี่ใช้display: table, table-rowและ / หรือtable-cellแต่พวกเขาไม่ได้ทำซ้ำพฤติกรรมเช่นเดียวกับmin-height: 100%;ซึ่งเป็น:

• รับค่าความสูงที่คำนวณได้ของพาเรนต์ (ตรงข้ามกับการสืบทอดheightคุณสมบัติ)
• อนุญาตให้ความสูงของผู้ปกครองที่จะเกินของmin-height;

ในขณะที่ใช้โซลูชันนี้พฤติกรรมจะเหมือนกันและmin-heightไม่จำเป็นต้องใช้คุณสมบัติซึ่งอนุญาตให้แก้ไขข้อบกพร่องได้

คำอธิบาย

เหตุผลที่ใช้งานได้เนื่องจากไม่เหมือนกับองค์ประกอบส่วนใหญ่องค์ประกอบที่ใช้display: tableและtable-rowมักจะสูงเท่ากับเนื้อหา นี้จะทำให้พวกเขาheightประพฤติคุณสมบัติคล้าย ๆ min-heightกับ

ทางออกในการดำเนินการ

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

#containment {
  display: table;
  height: 100%;
  background: pink;
  width: 100%;
}

#containment-shadow-left {
  display: table-row;
  height: 100%;
  background: aqua;
}

#content {
  padding: 15px;
}

#demo {
  display: none;
  background-color: red;
  height: 200px;
}

#demo-checkbox:checked ~ #demo {
  display: block;
}

<div id="containment">
  <div id="containment-shadow-left">
    <div id="content">
      <input id="demo-checkbox" type="checkbox">
      <label for="demo-checkbox">Click here for overflow demo</label>
      <div id="demo">This is taller than #containment</div>
    </div>
  </div>
</div>

โซลูชัน JS อื่นซึ่งเป็นเรื่องง่ายและสามารถใช้เพื่อหลีกเลี่ยงการแก้ปัญหา CSS-only หรือมาร์กอัป / แฮ็คที่ไม่ใช่เรื่องง่าย

function minHeight(elm, percent) {
  var windowHeight = isNaN(window.innerHeight) ? 
                     window.clientHeight : window.innerHeight;
  var height = windowHeight * percent / 100;
  elm.style.minHeight = height + 'px';
}

W / jQuery:

function minHeight($elm, percent) {
  var windowHeight = $(window).height();
  var height = windowHeight * percent / 100;
  $elm.css('min-height', height + 'px');
}

คำสั่งเชิงมุม:

myModule.directive('minHeight', ['$window', function($window) {
  return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
      var windowHeight = isNaN($window.innerHeight) ? 
               $window.clientHeight : $window.innerHeight;
      var height = windowHeight * attrs.minHeight / 100;
      elm.css('min-height', height + 'px');
    }
  };
}]);

ที่จะใช้เช่นนี้

<div>
  <!-- height auto here -->
  <div min-height="100">
    <!-- This guy is at least 100% of window height but grows if needed -->
  </div>
</div>

สิ่งนี้ใช้ได้ผลกับฉัน:

.parent {
  min-height: 100px;
  background-color: green;
  display: flex;
}
.child {
  height: inherit;
  width: 100%;
  background-color: red;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="parent">
      <div class="child">
      </div>
    </div>
  </body>
</html>

 Run code snippetHide results
Expand snippet

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

ไม่มีล้น

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-50 {
  height: 50%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-50"></div>
      
    </div>
  </div>
</div>

ด้วยการล้น

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-150 {
  height: 150%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-150"></div>
      
    </div>
  </div>
</div>

นี่คือสิ่งที่ใช้ได้กับฉันด้วยความสูงเป็นเปอร์เซ็นต์และผู้ปกครองยังคงเติบโตตามความสูงของเด็ก ทำงานได้ดีใน Firefox, Chrome และ Safari

.parent {
  position: relative;
  min-height: 100%;
}

.child {
  min-height: 100vh;
}

<div class="parent">
    <div class="child"></div>
  </div>

หลังจากพยายามของเรา! chrome เข้าใจดีว่าฉันต้องการให้องค์ประกอบลูกมีความสูง 100% เมื่อฉันตั้งค่าการแสดงผลเป็นบล็อกอินไลน์ btw การตั้งค่าลอยจะทำให้มัน

display:inline-block

ปรับปรุง

มันไม่ทำงาน วิธีแก้ปัญหาคือให้พาโพรเซสของโหนดหยุดทำงานและใช้งานที่และของเพจด้วย javascript

<script>
    SomedivElement = document.getElementById('mydiv');
    SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';    
</script>