Divs - 延伸到可变高度 [英] Divs - Extend to variable height
问题描述
这个问题无处不在！我已经阅读了所有可用的论坛，花了大约40多个小时，并且失去了一些头发。我将解释它的外观是什么，但我刚刚意识到删除DocType使它看起来像我想要它（使用包含>符号的div全长）。但显然我希望看看DocType仍在使用。
HTML
[HTML]
<！DOCTYPE HTML PUBLIC" - / / W3C // DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< link rel =" stylesheet" HREF =" NavigationCSS.css" type =" text / css">
< title>表格模板< / title>
< script type =" ; text / javascript">
window.onload = windowLoad;
function windowLoad（）
{
rowNormal（）;
rowHover（）;
menuHideHover（）;
setReturnMenuHeight（）;
}
函数rowHover（ ）
{
var table = document.getElementById（''navigationTable''）;
var tds = table.getElementsByTagName（''td ''）;
for（var i = 0; i< tds.length; i ++）
{
tds [i] .onmouseover = function（）{this.id =" hovered" ;; }
tds [i] .onmouseout = function（）{this.id =" normal" ;; }
}
}
函数rowNormal（）
{
var table = document.getElementById（''navigationTable''）;
var tds = table.getElementsByTagName（''td''）;
for（var i = 0; i< tds.length; i ++）
{
tds [i] .id =" normal";
}
}
功能menuHideHover（）
{
var divs = document.getElementsByTagName（''div''）;
for（var i = 0; i< divs.length; i ++）
{
if（divs [i] .className.match（" hideMenu"））
{
divs [i]。 onmouseover = function（）{this.id =" hovered";}
divs [i] .onmouseout = function（）{this.id =" normal";}
}
}
}
函数setReturnMenuHeight（）
{
var NavigationContainer = document.getElementById（''n avigationContainer''）;
var ReturnMenu = document.getElementById（''returnMenu''）;
ReturnMenu.height = NavigationContainer.height +" px" ;;
}
< / script>
< / head>
< body>
< div id =" navigationContainer">
< div id =" returnMenu">
>
< / div>
< div id =" navigationOptions">
< table id =" navigationTable">
< tbody>
< tr>
< td> Nexus< / td>
< / tr>
< tr>
< td>采矿< / td>
< / tr>
< tr>
< td>处理< / td>
< / tr>
< tr>
< td>战斗中心< / td>
< / tr>
< tr>
< td>发货Yard< / td>
< / tr>
< tr>
< td>扫描< / td>
< / tr>
< tr>
< td>构造< / td>
< / tr>
< tr>
< td>研究< / td>
< / tr>
< tr>
< td>能源控制< / td>
< / tr>
< tr>
< td> Habitation< / td>
< / tr>
< / tbody>
< / table>
< / div>
< div class =" hideMenu" id =" normal">
隐藏菜单
< / div>
< / div>
< / body>
< / html>
[/ HTML]
CSS
This problem is everywhere! I have read all forums available, spent about 40+ hours on it and lost a bit of hair. I was going to explain what its ment to look like but I just realised removing the DocType makes it look like how I want it (with the div containing the ">" symbol the full length). But obviously I want this look with the DocType still on.
HTML
[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="NavigationCSS.css" type="text/css">
<title>Table Template</title>
<script type="text/javascript">
window.onload = windowLoad;
function windowLoad()
{
rowNormal();
rowHover();
menuHideHover();
setReturnMenuHeight();
}
function rowHover()
{
var table=document.getElementById(''navigationTable'');
var tds= table.getElementsByTagName(''td'');
for(var i=0; i<tds.length; i++)
{
tds[i].onmouseover=function() { this.id="hovered"; }
tds[i].onmouseout=function() { this.id="normal"; }
}
}
function rowNormal()
{
var table=document.getElementById(''navigationTable'');
var tds= table.getElementsByTagName(''td'');
for(var i=0; i<tds.length; i++)
{
tds[i].id="normal";
}
}
function menuHideHover()
{
var divs = document.getElementsByTagName(''div'');
for (var i=0; i<divs.length; i++)
{
if(divs[i].className.match("hideMenu"))
{
divs[i].onmouseover=function() { this.id="hovered";}
divs[i].onmouseout=function() { this.id="normal";}
}
}
}
function setReturnMenuHeight()
{
var NavigationContainer= document.getElementById(''navigationContainer'');
var ReturnMenu= document.getElementById(''returnMenu'');
ReturnMenu.height= NavigationContainer.height + "px";
}
</script>
</head>
<body>
<div id= "navigationContainer">
<div id= "returnMenu">
>
</div>
<div id= "navigationOptions">
<table id= "navigationTable">
<tbody>
<tr>
<td>Nexus</td>
</tr>
<tr>
<td>Mining</td>
</tr>
<tr>
<td>Processing</td>
</tr>
<tr>
<td>Battle Centre</td>
</tr>
<tr>
<td>Ship Yard</td>
</tr>
<tr>
<td>Scanning</td>
</tr>
<tr>
<td>Construction</td>
</tr>
<tr>
<td>Research</td>
</tr>
<tr>
<td>Energy Control</td>
</tr>
<tr>
<td>Habitation</td>
</tr>
</tbody>
</table>
</div>
<div class="hideMenu" id="normal">
Hide Menu
</div>
</div>
</body>
</html>
[/HTML]
CSS
推荐答案
您好，
在CSS代码的第75行，您将div＃navigationContainer的高度设置为0px。当百分比用于宽度或高度时，这是元素包含块的百分比。由于div＃returnMenu的父级是div＃navigationContainer，因此高度计算为0px的100％，因此div的高度为零。
为了让你在正确的路径上更改第75行CSS为：
Hi,
On line 75 of the CSS code you set the height of the div#navigationContainer to 0px. When a percentage is used for either a width or height this is a percentage of an element''s containing block. Since the parent of div#returnMenu is div#navigationContainer the height calculates to 100% of 0px, therefore the div has zero height.
To put you on the right path change line 75 of the CSS to :
我刚刚看了一眼，现在看起来在IE7中看起来更好了和Firefox在IE6中看起来不正确。我明天会再看一眼，因为我现在时间不够。
I''ve just had another quick glance at this and while it now looks better in IE7 and Firefox it does not look correct in IE6. I will have another look tomorrow as I am short of time at the moment.
高度：auto也不起作用（以前用它）。我认为它不起作用，因为父母试图缩小到内容（高度：自动），内容正在尝试扩展到父级（高度：100％）。
我尝试过#returnMenu使用javascript跳出父级和匹配高度，但javascript读取变量高度为null：S（即使使用.pixelHeight）。我可能会尝试将它们放在桌子的一排，因为它将匹配高度，但不确定是否能够使该行上的td'重叠，同时保持匹配的高度。
欢呼
The height: auto does not work either (used to have it at that). I think its not working because the parent is trying to shrink to the contents (Height: auto) and the contents are trying to expand to the parent (height: 100%).
I have tried taking the #returnMenu out of the parent and matching height using javascript but the javascript reads a variable height as null :S (even when using .pixelHeight). I may try to have them both in a row of a table next as it will match the heights but not sure if ill be able to make the td''s on that row overlap while keeping the matched heights.
cheers
这篇关于Divs - 延伸到可变高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
