Question

我有一个侧面菜单，高度至少需要500px。然而，它也需要一路走到最低点。

在有监视器等空间的屏幕上，mh100％正常工作。但是，如果没有其他内容，则在移动设备上，菜单会被修剪。

如果我设置了固定值，那么在大屏幕上它不会一直扩展到底部。

我可以使用两个div，父母用minh100％和子女用固定高度这样父母会有一个背景颜色，看起来会让菜单展开

但想知道是否有其他方法不要求我仅仅为了视觉目的而混淆html。

Answer 1

除非我不确切地理解你在寻找什么，否则看起来应该很容易。

编辑：我错过了你问题的绝对位置部分，但它并没有太大区别：

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</nav>
<main>
    <h1>Page</h1>
    <p>Content.</p>
    <p>Content.</p>
    <p>Content.</p>
    <p>Content.</p>
    <p>Content.</p>
</main>

<style type="text/css">
  html,body {
    margin:0;
    height:100%;
    width:100%;
  }

  nav {
    position:absolute;
    min-height:500px;
    height:100%;
    background:#ccc;
    width:30%;
  }

  main {
    width:60%;
    padding:0 5%;
    float:right;
  }
</style>

Here's the fiddle

使绝对定位元素的最小高度值为哪个更大？

1 个答案: