Question

我创建了一个网站，但它的高度有问题。我尝试了几乎所有方法，但结果相同。我想动态地改变元素的高度。

请查看网站（内容的左侧）。 Website Link

它的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

@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 3

您可以轻松使用此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 4

您需要检查您的DOM结构，我看到2个解决此问题的方法

1）使用带有2列的表：第一列将扮演#leftBar的角色，第二列将扮演#inner的角色;这样两个列总是具有相同的高度;

2）使用盒子模型：

1.完全删除#leftBar;

2设置为#inner padding-left：75px;

3设置为#inner background：url（“images / leftbar-bg.gif”）no-repeat scroll 0 0＃7A2652;

4为#inner创建一个内包装，并在

结束你将：

<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;
}

div元素的高度不起作用

5 个答案: