我的问题
当我最小化浏览器窗口时,类别菜单不会像我希望的那样最小化。当窗口最小化时,我希望li元素一个接一个地放在其他其他li元素下方。问题是整个ul元素都被放到了p元素之下。
这是全尺寸窗口中的类别菜单。注意主类别和子类别灰色p DIVS 不在最大高度,即使我已将它们的高度设置为 100%。橙色和黄色的 DIV 称为#main和#sub。紫色的 DIV 是ul元素,带有文本的浅色块是li元素。 替代文字 http://lh3.ggpht.com/_rNlSpSUBkYo/TF08FsFrA4I/AAAAAAAAAFw/hZm7flu032A/cat-full-size.jpg
这是一个 861 像素宽的窗口。没有变化... 替代文字 http://lh3.ggpht.com/_rNlSpSUBkYo/TF08GYxMMhI/AAAAAAAAAF0/nFpr-pV3eF4/cat-861px.jpg
这是一个 777px 的窗口。在这里,您可以看到黄色#sub DIV 中的整个紫色ul元素刚好低于灰色的 Sub Categories p元素 替代文本 http://lh5.ggpht.com/_rNlSpSUBkYo/TF08H2tAA8I/AAAAAAAAAF4/VH5Wo46HCgg/cat-777px.jpg
这是一个 731px 的窗口。在这里,我们可以看到橙色#main DIV 中的紫色ul元素也低于 Main Categories p元素。 替代文字 http://lh3.ggpht.com/_rNlSpSUBkYo/TF08IUMAXRI/AAAAAAAAAF8/pqmPpOgVv_Y/cat-731px.jpg
这是一个 721px 的窗口。最后我们可以看到随着黄色#sub DIV 最小化 , li元素开始下降一个级别。
我寻求的解决方案
现在我想向您展示我在 Photoshop 中构建的模型之后的结果。
在这里,我们可以看到包含文本 Main Categories 和 Sub Categories 的灰色p元素现在处于其包含 DIV的#main和#sub的完整高度。同样更重要的是,我们可以看到整个ul元素不再低于灰色p元素。 替代文字 http://lh3.ggpht.com/_rNlSpSUBkYo/TF08LBmFWnI/AAAAAAAAAGM/WLQx_wVsSQw/cat-correct-777px.jpg
And finally we can see #main DIVs purple ul element minimize propely just as the #sub DIVs purple ul element did in the screen shot above. alt text http://lh6.ggpht.com/_rNlSpSUBkYo/TF08L0F5OoI/AAAAAAAAAGQ/isdjLp6m_rs/cat-correct-731px.jpg
Full size images of the images here can be seen at my Picassa album
Any ideas on how to fix this?