высота элемента div не работает

Question

Я создал веб-сайт и у меня проблемы с его высотой.Я попробовал почти все способы, но те же результаты.Я хочу динамически изменять высоту элемента.

проверьте веб-сайт (слева от содержимого). Ссылка на веб-сайт

его HTML-код:

<div id="leftBar">&nbsp;</div>

его CSS:

#leftBar {
    background: url("images/leftbar-bg.gif") no-repeat scroll 0 0 #7A2652;
    float: left;
    height: 100%;
    margin-bottom: 7px;
    margin-right: 12px;
    min-height: 925px;
    width: 75px;
}

пожалуйста, проверьте друзей и помогите мне ..

спасибо

Answer 1

Вы используете процентное значение (%) для установки высоты.Однако это будет работать только , если родительский элемент имеет фиксированную высоту - или, если родительский элемент также имеет процент, его родительская высота должна быть фиксированнойи так далее.Если вы будете использовать проценты вплоть до узла body/html, тогда потребуется неявная высота его родителя, то есть размеры окна.

Answer 2

Вы можете легко использовать этот JavaScript:

<script type="text/javascript">
window.onload = function() {
var h = $('#tdleftcontent').height();
document.getElementById('cntt').style.height = h + 'px';
};
</script>

<table>
<tr>
<td id="tdleftcontent">
<div style="height:auto;" id="cntt">
    It will be expand ...
</div>
</td>
</tr>
</table>

Answer 3

@ Muzammil писал:

Можете ли вы сказать мне, как я это делаю ..

Конечно ... Сделайте эти изменения:

Удалить:

<div id="leftBar"></div>

Изменение:

#site{
  width:966px;
  margin:0 auto 25px;
  border: 7px solid white;
  background:url("images/leftbar-bg.gif") no-repeat scroll 6px 85px #7A2652;
}

#inner {
    float: left;
    margin: 12px 0 12px 75px;
    padding-left: 12px;
    padding-right: 8px;
    background-color: white;
}

отсортирован.

Answer 4

вам нужно просмотреть структуру DOM, я вижу 2 решения для этой проблемы

1) использовать таблицу с 2 столбцами: первый столбец будет выполнять роль #leftBar, второй столбец будет выполнять роль #inner; таким образом, оба столбца всегда будут иметь одинаковую высоту;

• 2) с использованием модели коробки:

  1. Удалить полностью #leftBar;

  2 установлен на #inner padding-left: 75px;

  3 установлен на #inner background: url ("images / leftbar-bg.gif") прокрутка без повтора 0 0 # 7A2652;

  4 создайте внутреннюю оболочку для #inner и установите ее фон на #fff (белый) в

конец у вас будет:

<div id="inner">
     <div id="innerWrapper">
         ....all the code ...
     </div> <!-- closed inner Wrapper -->
</div> <!-- closed inner --->

Answer 5

если вы можете изменить свою HTML-структуру, включите внутренний div в левую полосу и установите отступ слева от левой полосы равным желаемой ширине;

HTML:

<div id="leftBar">
    <div id="inner"></div>
</div>

CSS:

#leftbar{
   padding-left:75px
   background: url("images/leftbar-bg.gif") no-repeat scroll 0 0 #7A2652;
}

#inner{
    background:#fff;
}