วิธีการบังคับให้ div ลูกเป็น 100% ของความสูงของ div parent โดยไม่ระบุความสูงของ parent

ฉันมีเว็บไซต์ที่มีโครงสร้างต่อไปนี้:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

การนำทางอยู่ด้านซ้ายและ div เนื้อหาอยู่ทางขวา ข้อมูลสำหรับหมวดเนื้อหาจะถูกดึงเข้าไปใน PHP ดังนั้นจึงแตกต่างกันทุกครั้ง

ฉันจะปรับขนาดการนำทางในแนวตั้งเพื่อให้ความสูงนั้นสูงเท่ากับความสูงของเนื้อหาไม่ว่าจะโหลดหน้าไหน

หมายเหตุ : คำตอบนี้ใช้ได้กับเบราว์เซอร์รุ่นเก่าโดยไม่รองรับมาตรฐาน Flexbox สำหรับวิธีการที่ทันสมัยโปรดดู: https://stackoverflow.com/a/23300532/1155721

ผมขอแนะนำให้คุณลองดูที่เท่าเทียมกันคอลัมน์ความสูงด้วย CSS ข้ามเบราว์เซอร์และไม่มี Hacks

โดยพื้นฐานแล้วการทำสิ่งนี้ด้วย CSS ในเบราว์เซอร์ที่ใช้งานร่วมกันได้นั้นไม่ใช่เรื่องเล็กน้อย (แต่ไม่สำคัญกับตาราง) ดังนั้นหาวิธีแก้ปัญหาก่อนบรรจุที่เหมาะสม

นอกจากนี้คำตอบยังขึ้นอยู่กับว่าคุณต้องการความสูง 100% หรือความสูงที่เท่ากัน โดยปกติความสูงจะเท่ากัน หากสูง 100% คำตอบจะแตกต่างกันเล็กน้อย

สำหรับผู้ปกครอง:

display: flex;

คุณควรเพิ่มคำนำหน้าบางส่วนhttp://css-tricks.com/using-flexbox/ http://css-tricks.com/using-flexbox/

แก้ไข: ดังที่ @Adam Garner ตั้งข้อสังเกต, จัดเรียงรายการ: ยืดออก; ไม่จำเป็น มันใช้สำหรับผู้ปกครองไม่ใช่เด็ก หากคุณต้องการกำหนดเด็กยืดคุณใช้จัดแนวตนเอง

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

นี่เป็นปัญหาที่ทำให้หงุดหงิดกับนักออกแบบตลอดเวลา เคล็ดลับคือคุณต้องตั้งค่าความสูงเป็น 100% สำหรับ BODY และ HTML ใน CSS ของคุณ

html,body {
    height:100%;
}

รหัสที่ดูเหมือนไม่มีจุดหมายนี้คือการกำหนดให้เบราว์เซอร์มีความหมาย 100% น่าผิดหวังใช่ แต่เป็นวิธีที่ง่ายที่สุด

ฉันพบว่าการตั้งค่าสองคอลัมน์เป็นdisplay: table-cell;แทนที่จะใช้float: left;งานได้ดี

หากคุณไม่คำนึงถึง div การนำทางที่ถูกตัดในกรณีที่ div สั้นเนื้อหาโดยไม่คาดคิดมีวิธีง่าย ๆ อย่างน้อยหนึ่งวิธี:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

นอกจากนี้ยังมีเทคนิคfaux-column

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

ใช้ jQuery:

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

ลองทำกำไรขั้นต้น 100%

margin-bottom: 100%;

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

ดูตัวอย่างนี้

height : <percent>จะทำงานได้ก็ต่อเมื่อคุณมีโหนดพาเรนต์ทั้งหมดที่มีเปอร์เซ็นต์ความสูงที่ระบุพร้อมความสูงคงที่ในหน่วยพิกเซล, ems และอื่น ๆ ที่ระดับบนสุด ด้วยวิธีนี้ความสูงจะลดลงไปที่องค์ประกอบของคุณ

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

หลังจากค้นหาและลองมานานไม่มีอะไรแก้ไขปัญหาของฉันได้ยกเว้น

style = "height:100%;"

เมื่อ div ของเด็ก ๆ

และสำหรับผู้ปกครองใช้สิ่งนี้

.parent {
    display: flex;
    flex-direction: column;
}

นอกจากนี้ฉันกำลังใช้ bootstrap และสิ่งนี้ไม่ได้ทำให้การตอบสนองของฉันเสียหาย

ตามวิธีที่อธิบายไว้ในบทความนี้ฉันได้สร้างวิธีการแก้ปัญหาแบบไดนามิกน้อยลง:

Html:

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

หัก:

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}

เพิ่มdisplay: gridไปยังผู้ปกครอง

ฉันรู้ว่ามันเป็นเวลาที่ยาวนานมาตั้งแต่คำถามถูกสร้างขึ้น แต่ฉันพบวิธีแก้ปัญหาที่ง่ายและคิดว่ามีคนใช้มันได้ (ขออภัยเกี่ยวกับภาษาอังกฤษที่ไม่ดี) นี่มันไป:

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

ตัวอย่างง่ายๆ โปรดทราบว่าคุณสามารถเปลี่ยนเป็นการตอบสนองได้

ทางออกของฉัน:

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});

มีความขัดแย้งเล็กน้อยในชื่อคำถามและเนื้อหา ชื่อพูดถึง div div แต่คำถามทำให้ดูเหมือนว่าคุณต้องการให้ div พี่น้องสองคน (การนำทางและเนื้อหา) มีความสูงเท่ากัน

คุณ (a) ต้องการทั้งการนำทางและเนื้อหาเป็นความสูงหลัก 100% หรือ (b) ต้องการการนำทางและเนื้อหาให้มีความสูงเท่ากันหรือไม่

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

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

และตั้งค่า div ของเนื้อหาให้มีระยะขอบซ้ายของความกว้างของบานหน้าต่างนำทาง ด้วยวิธีนี้เนื้อหาของเนื้อหาจะอยู่ทางด้านขวาของการนำทางและคุณสามารถตั้งค่า div การนำทางให้เป็น 100% ของความสูงของเนื้อหา

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

[อ้างถึงรหัสน้อยของ Dmity ในคำตอบอื่น] ฉันคาดเดาว่านี่เป็น "รหัสหลอก" หรือไม่?

จากสิ่งที่ฉันเข้าใจลองใช้เทคนิคมารยาทคอลัมน์ที่ควรทำเคล็ดลับ

http://www.alistapart.com/articles/fauxcolumns/

หวังว่าจะช่วย :)

เคล็ดลับนี้ใช้งานได้: การเพิ่มองค์ประกอบสุดท้ายในส่วนของ HTML ด้วยสไตล์ที่ชัดเจน: ทั้งสอง;

    <div style="clear:both;"></div>

ทุกอย่างก่อนหน้านั้นจะถูกรวมไว้ในที่สูง

ให้position: absolute;กับเด็กที่ทำงานในกรณีของฉัน

คุณใช้CSS Flexbox

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

คำตอบนี้ไม่เหมาะอีกต่อไปตั้งแต่ CSS flexbox และตารางที่นำไปใช้กับ CSS อย่างไรก็ตามมันยังคงเป็นวิธีการแก้ปัญหาการทำงาน

บนหน้าจอขนาดเล็กคุณอาจต้องการให้ความสูงอัตโนมัติเป็น col1, col2 และ col3 จะซ้อนกัน

อย่างไรก็ตามหลังจากจุดพักการสืบค้นสื่อคุณต้องการให้ cols ปรากฏถัดจากกันและกันด้วยความสูงเท่ากันสำหรับคอลัมน์ทั้งหมด

1125 px เป็นเพียงตัวอย่างของจุดพักความกว้างของหน้าต่างหลังจากนั้นคุณต้องการสร้างคอลัมน์ทั้งหมดให้มีความสูงเท่ากัน

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

แน่นอนคุณสามารถตั้งค่าเบรกพอยต์ได้มากขึ้นหากคุณต้องการ

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            let vraperH = $('.wraper').height();
            if (window.innerWidth>= 1125) {
              $('.col1').height(vraperH);
              $('.col2').height(vraperH);
              $('.col3').height(vraperH);
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>

ฉันมีปัญหาเดียวกันมันทำงานตามคำตอบของ Hakam Fostok ฉันได้สร้างตัวอย่างเล็ก ๆ ในบางกรณีมันอาจทำงานได้โดยไม่ต้องเพิ่มdisplay: flex;และflex-direction: column;บนคอนเทนเนอร์หลัก

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

JSFiddle

ดังที่แสดงไว้ก่อนหน้า flexbox เป็นวิธีที่ง่ายที่สุด เช่น.

#main{ display: flex; align-items:center;}

สิ่งนี้จะจัดเรียงองค์ประกอบย่อยทั้งหมดไปยังกึ่งกลางภายในองค์ประกอบหลัก

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

จาก:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

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

นี่เป็นคำตอบเดียวกับที่ฉันตอบคำถามนี้

นี่คือการสาธิตแบบเก่าตามposition: absoluteคอนเทนเนอร์เนื้อหาและพาเรนต์position: relativeคอนเทนเนอร์

สำหรับวิธีการที่ทันสมัยที่จะทำมัน - กล่องแบบยืดหยุ่นดีที่สุด

วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการปลอมมัน List Apart ได้ครอบคลุมสิ่งนี้อย่างกว้างขวางในช่วงหลายปีที่ผ่านมาเช่นเดียวกับในบทความนี้จาก Dan Cederholm จาก 20042004

นี่คือวิธีที่ฉันมักจะทำ:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

คุณสามารถเพิ่มส่วนหัวลงในการออกแบบนี้ได้โดยการห่อ #container ใน div อื่นฝัง div header เป็นพี่น้องของ # container และย้ายลักษณะขอบและความกว้างไปยังคอนเทนเนอร์หลัก นอกจากนี้ CSS ควรจะถูกย้ายไปยังไฟล์ที่แยกต่างหากและไม่ถูกเก็บไว้แบบอินไลน์ ฯลฯ ฯลฯ ในที่สุดคลาส clearfix สามารถพบได้ในตำแหน่งทุกอย่าง