Как сделать относительно позиционируемых ребенка, чтобы высота всех родителей

Question

У меня есть этот макет

body, html { 
 
    height: 90%; 
 
} 
 
#content{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#sidebar { 
 
    position: relative; 
 
    width: 200px; 
 
    float: left; 
 
    height: 100%; 
 
    background-color: green; 
 
} 
 
#sidebar-content { 
 
    height: 120px; 
 
    background-color: blue; 
 
    
 
} 
 
#sidebar-footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: black; 
 
} 
 

 
#main { 
 
    position: relative; 
 
    overflow: hidden; 
 
    background-color: red; 
 
} 
 
#main-content { 
 
    height: 750px; 
 
}

<div id="content"> 
 
    <div id="sidebar"> 
 
    <div id="sidebar-content"> 
 
    </div> 
 
    <div id="sidebar-footer"> 
 
    </div> 
 
    </div> 
 
    <div id="main"> 
 
    <div id="main-content"> 
 
    </div> 
 
    </div> 
 
</div>

мне нужна боковая панель, чтобы занять все высоты доступны, если его высота ниже, чем # Мэйна. Установка позиции боковой панели в абсолютном режиме разрешает это, но добавляет еще больше ошибок, есть ли решение для относительно позиционированного дочернего элемента, чтобы получить всю высоту родителя без с указанием высоты родительского элемента в пикселях?

Как вы можете видеть на скрипке, если #main превышает ширину боковой панели, боковая панель короче, но ей необходимо заполнить всю высоту.

Answer 1

Я думаю, что решение jQuery поможет вам решить вашу проблему :) Try this Это позволит иметь #sidebar с такой же высотой, как и container. Надеюсь, это поможет :) Счастливое кодирование.

JQuery:

$(document).ready(function(){ 
    var wrapH = $('#content').outerHeight(); 

    $('#sidebar').css("height", wrapH); 
}); 

Отредактировано:

JS Fiddle Link

$(document).ready(function(){ 
    var wrapH = $('#main').outerHeight(); 

    $('#sidebar').css("height", wrapH); 
}); 

Просто измените содержимое в основной. Надеюсь, это решит проблему. Это приведет к тому, что высота боковой панели будет такой же, как и основная высота.

Answer 2

CSS Flexbox действительно решает вашу проблему и является идеальным ответом, если вам не нужно поддерживать старые браузеры.

В принципе, просто добавив display: flex в контейнер, это поможет вам разобраться.

Браузеры поддерживают flexbox различными способами, убедитесь, что вы проверили скомпилированный CSS этого Pen, чтобы получить все предварительные исправления браузера и т. Д.

Link to CodePen

Answer 3

Вы можете быть в состоянии использовать комбинацию свойств CSS, чтобы достичь того, что вы ищете. Основная причина, по которой вы столкнулись с проблемой position:absolute, была связана с вашим float:left.

Имейте взгляд через это, и вы можете найти некоторые из позиционирующих и ширины деклараций, используемых в вашей реализации:

body, 
 
html { 
 
    height: 90%; 
 
} 
 
#content { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    background: lightgray; 
 
} 
 
#sidebar { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: green; 
 
    z-index: 8; 
 
} 
 
#sidebar-content { 
 
    height: 120px; 
 
    background-color: blue; 
 
} 
 
#sidebar-footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: black; 
 
} 
 
#main { 
 
    overflow: hidden; 
 
    background-color: red; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 200px; 
 
    width: calc(100% - 200px); 
 
    height: 100%; 
 
    z-index: 10; 
 
} 
 
#main-content {}

<div id="content"> 
 
    <div id="sidebar"> 
 
    <div id="sidebar-content"> 
 
    </div> 
 
    <div id="sidebar-footer"> 
 
    </div> 
 
    </div> 
 
    <div id="main"> 
 
    <div id="main-content">this is the main content 
 
    </div> 
 
    </div> 
 
</div>