我的问题
当我最小化浏览器窗口时，类别菜单并没有按照我希望的方式最小化。我希望 li 元素在窗口最小化时一个接一个地下降到其他 li 元素之下。问题是整个 ul 元素被放到 p 元素下面。
menu is located here 的实例.
实例的 code is located here.
这是全尺寸窗口中的类别菜单。请注意主类别和子类别灰色 p DIVS 不在最大高度，即使我已将它们的高度设置为 100%。橙色和黄色的 DIV 称为 #main 和 #sub。紫色的 DIV 是 ul 元素，其中带有文本的浅色 block 是 li 元素。 alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08FsFrA4I/AAAAAAAAAFw/hZm7flu032A/cat-full-size.jpg
这是在一个 861 像素宽的窗口中。不用找了... alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08GYxMMhI/AAAAAAAAAF0/nFpr-pV3eF4/cat-861px.jpg
这里是一个 777px 的窗口。在这里，您可以看到黄色 #sub DIV 中的整个紫色 ul 元素刚好落在灰色 Sub Categories p 元素下方 alt text http://lh5.ggpht.com/_rNlSpSUBkYo/TF08H2tAA8I/AAAAAAAAAF4/VH5Wo46HCgg/cat-777px.jpg
这里是一个 731px 的窗口。在这里，我们可以看到橙色 #main DIV 中的紫色 ul 元素也位于 Main Categories p 元素下方。 alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08IUMAXRI/AAAAAAAAAF8/pqmPpOgVv_Y/cat-731px.jpg
这里是一个 721px 的窗口。最后我们可以看到 li 元素开始下降一个级别，因为黄色的 #sub DIV 最小化得更多。
我寻求的解决方案
现在我想向您展示我在 Photoshop 中构建的模型后的结果。
在这里我们可以看到包含文本 Main Categories 和 Sub Categories 的灰色 p 元素现在处于它们的 #main 和 #sub< 的全高/strong> 包含 DIV。此外，更重要的是，我们可以看到整个 ul 元素不再低于灰色 p 元素。 alt text http://lh3.ggpht.com/_rNlSpSUBkYo/TF08LBmFWnI/AAAAAAAAAGM/WLQx_wVsSQw/cat-correct-777px.jpg
最后我们可以看到 #main DIVs purple ul 元素像 #sub DIVs purple ul 元素在上面的屏幕截图中做了。 alt text http://lh6.ggpht.com/_rNlSpSUBkYo/TF08L0F5OoI/AAAAAAAAAGQ/isdjLp6m_rs/cat-correct-731px.jpg
可以在我的 Picassa album 中查看此处图像的全尺寸图像
关于如何解决这个问题有什么想法吗？
最佳答案
我没有时间完成这个，但在完成它之后，这就是我得到的: (这里发帖是因为保存功能好像没用)。
<!DOCTYPE html>
<html>
<head>
<title>
Categories DIV Problem
</title>
<style type="text/css">
/*** GLOBAL ***/
*
{
padding: 0;
margin: 0 auto;
outline: none;
}
html, body
{
height: 100%;
font: .9em Arial ,san-serif;
}
ul, li
{
list-style: none;
}
.clear
{
clear: both;
}
/*** PAGE ***/
#container
{
max-width: 1000px;
width: 85%;
height: auto;
min-height: 100%;
margin: 0 auto;
}
/*** CATEGORIES ***/
#categories
{
height: 100%;
/* padding: 20px; */
margin: 5px 0 0 0;
}
#main
{
background: orange;
height:50px;
}
#sub
{
background: yellow;
}
#cat-main
{
}
#cat-sub
{
float: left;
}
.cat-name-box
{
float: left;
height: 100%;
background: #ddd;
}
.cat-choice-box
{
width:auto;
background: purple;
}
#categories li
{
float: left;
padding: 3px 8px;
margin: 1px;
}
#cat-main li
{
background: #D7B0FF;
}
#cat-main li:hover
{
cursor: pointer;
background: #9A38FF;
color: #fff;
}
#cat-sub li
{
background: #85FF87;
}
#cat-sub li:hover
{
cursor: pointer;
background: #00C403;
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="categories">
<div id="main">
<div class="cat-name-box">Main Categories</div>
<ul class="cat-choice-box" id="cat-main">
<li>Technology</li>
<li>Politics</li>
<li>Business</li>
<li>Science</li>
<li>Music</li>
<li>Film</li>
<li>Art</li>
<li>Health</li>
<li>Sports</li>
</ul>
</div>
</div>
</div>
</body>
</html>
问题是在文本+ul的容器上设置的高度，它必须为p元素设置(我把它改成了div我想，不记得为什么)继承100%的高度。
虽然我知道这不是完整的解决方案，但希望这种帮助。
关于html - 当用户最小化浏览器窗口时，如何使我的 CSS/HTML 类别菜单优雅地最小化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3430234/