当用户最小化浏览器窗口时，如何使我的 CSS/HTML 类别菜单优雅地最小化？答案

【问题标题】：How do I make my CSS/HTML category menu minimize gracefully when a user minimizes the browser window?当用户最小化浏览器窗口时，如何使我的 CSS/HTML 类别菜单优雅地最小化？
【发布时间】：2010-08-07 11:26:47
【问题描述】：

我的问题

当我最小化浏览器窗口时，类别菜单并没有按照我想要的方式最小化。当窗口最小化时，我希望 li 元素一个接一个地放在其他 li 元素的下方。问题是整个 ul 元素被放到 p 元素之下。

menu is located here 的一个活生生的例子。
实例的code is located here.

这是全尺寸窗口中的类别菜单。注意主类别和子类别灰色 p DIVS 不在最大高度，即使我已将它们的高度设置为 100%。橙色和黄色的 DIV 称为 #main 和 #sub。紫色的 DIV 是 ul 元素，带有文本的浅色块是 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

这里是一个 721 像素的窗口。最后我们可以看到，随着黄色的 #sub DIV 进一步最小化，li 元素开始下降一个级别。

我寻求的解决方案

现在我想向您展示我在 Photoshop 中构建的模型之后的结果。

在这里我们可以看到灰色的 p 元素包含文本 Main Categories 和 Sub Categories 现在处于它们的 #main 和 #sub 包含 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看到

关于如何解决这个问题的任何想法？

【问题讨论】：

标签： html css menu height minimize

【解决方案1】：

我没有时间完成这个，但是在完成它之后，我得到了：（在这里发帖是因为保存功能似乎不起作用）。

<!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>

问题是text + ul的容器上设置的高度，必须为p元素设置（我想我改成div了，不记得为什么了）才能继承100%的高度。

希望这种帮助虽然我知道这不是完整的解决方案。

【讨论】：

@Rawkward 谢谢，但问题是高度不能设置为像 50px 这样的固定高度，因为 1.) 如果只有几个类别，那么当我们有两行类别的空间时只需要一排的空间。这是浏览器窗口最大化时的情况。 2.) 如果稍后添加更多类别并且窗口最小化，我们可能需要超过 2 行才能使
元素落入。我正在寻找一种方法，当窗口最小化时，#sub 和 #main div 的高度会扩大，这样它就可以容纳额外的
挤压元素。

我知道，就像我说的，不是一个完整的解决方案。如果 CSS 不允许这种行为，您可能可以使用 jQuery 轻松完成。如果是这样，首先制作一个固定宽度的版本，然后如果禁用了 javascript，你仍然会有一个不错的菜单，只有在较小的窗口上有一个水平滚动条。问题，这个 html 结构是必需的还是其他的？如果结果相同？