Как установить div с li на родительскую высоту

-4

У меня есть бокс с этой проблемой целую вечность.

У меня есть родительская div оболочка, содержащая дочерний div "sidebar-wrapper", состоящий из ul с li в нем.

Я хочу, чтобы высота "боковой панели" соответствовала высоте "оберток". Моя проблема заключается в том, когда я устанавливаю ее height в auto 0.

Мой HTML:

<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
a lit of these li's
</a>
</li>
</ul>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
Whatever Content!!
</div>
</div>
</div>
</div>

Мой css:

#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;

min-height:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:400px;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}

спросил(а) 2021-01-25T13:08:03+03:00 5 месяцев назад
1
Решение
64

Смотрите эту скрипку

Используемый CSS выглядит следующим образом

html,body{
height: 100%;
}

#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
height: 100%;
min-height:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:100%;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}

Я дал height:100% для html, body, wrapper и body-content.

Установка высоты в auto просто устанавливает высоту, равную высоте содержимого div. Там, я думаю, вы хотите, чтобы высота была равна обертке, поэтому вам нужно установить ее на 100%.

и вот как я могу видеть ваш сайт после внесения указанных изменений.

enter image description here

ответил(а) 2021-01-25T13:08:03+03:00 5 месяцев назад
45

Установите родительскую позицию div в относительную, а child div - абсолютной:

#wrapper {
...
...

/**** added css ****/
position:relative;
/*********************/
...
...
}

Редактировать 1

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

Если это так, то "обертка" div не имеет никакого отношения. Просто установите положение "sidebar-div" на "fixed" и дайте правильные верхние и нижние поля в соответствии с полями заголовка и нижнего колонтитула:


и установите верхнюю и нижнюю части дочерней обертки в 0:

#sidebar-wrapper {
...
...
/**** added css ****/

position:fixed;
top:10px;
bottom:10px;

/*********************/
...
...
}

Здесь обновленная демонстрационная ссылка JS fiddle:

Updated Demo JS Fiddle Link

Надеюсь, это поможет!

ответил(а) 2021-01-25T13:08:03+03:00 5 месяцев назад
45

Измените высоту боковой стенки на 100% и придайте обертке высоту: см. Скрипку: см. Скрипку

#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
height: auto; /* example height */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:100%;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}

ответил(а) 2021-01-25T13:08:03+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема