如何使用css创建一个至少与其未知高度的父div一样高的子div

Question

如果菜单div的高度小于它的父div，它应该扩展到父级的高度，而父级的高度没有已知的高度。这部分就像是等级列高的问题。

但是如果菜单div大于父级的div，则既不会缩小到父级的也不会扩大父级的div < /强>

以下div中的（文本）内容应该在菜单div周围很好地流动，但这似乎并不复杂。

只有css可以实现吗？或者我需要js吗？使用js它不会那么困难但我希望只有css解决方案。

＆＃13;

＆＃13;

.main-top {
  position: relative;
}
.navigation {
width: 200px;
background-color: #999;
margin-right: 10px;
float: left;
}
.page-title,
figure {
margin-left: 210px;
}
figure {
color: #ddd;
}
.menu-2 {
/* set display: block; to simulate more content here*/
display: none;
}

＆＃13;

<div class="main-top">
  <header class="article">
    <section class="navigation">
      <h2 class="pane-title">Menu</h2>
      <ul class="menu">
        <li>
          <a href="#">1. Lorem ipsum aeque oratio</a>
        </li>
        <li>
          <a href="#">2. Postulant vim in</a>
        </li>
        <li>
          <a href="#">3. Ne zzril qualisque sadipscing</a>
        </li>
        <li>
          <a href="#">4. Eu per ubique eligendi quaerendum</a>
        </li>
        <li>
          <a href="#">5. Lorem ipsum aeque oratio</a>
        </li>
        <li>
          <a href="#">6. Postulant vim in</a>
        </li>
        <li>
          <a href="#">.....</a>
        </li>
        <li>
          <a href="#">X. Eu per ubique eligendi quaerendum</a>
        </li>
      </ul>
            <ul class="menu-2">
        <li>
          <a href="#">1. Lorem ipsum aeque oratio</a>
        </li>
        <li>
          <a href="#">2. Postulant vim in</a>
        </li>
        <li>
          <a href="#">3. Ne zzril qualisque sadipscing</a>
        </li>
        <li>
          <a href="#">4. Eu per ubique eligendi quaerendum</a>
        </li>
        <li>
          <a href="#">5. Lorem ipsum aeque oratio</a>
        </li>
        <li>
          <a href="#">6. Postulant vim in</a>
        </li>
        <li>
          <a href="#">.....</a>
        </li>
        <li>
          <a href="#">X. Eu per ubique eligendi quaerendum</a>
        </li>
      </ul>
    </section>
    <div class="page-title">
      <h1>An soluta quidam cum duo dolor dissentias, ne sea volutpat theophrastus</h1>
    </div>
    <figure class="pane-panels-mini">
      <img typeof="foaf:Image" src="https://i.stack.imgur.com/4pv8d.png" width="250" height="375" alt="Layout" title="I hope it works like that" />
      <figcaption class="">
        Lorem ipsum aeque oratio postulant vim in. Ne zzril qualisque sadipscing pri, eu per ubique eligendi quaerendum. An soluta quidam cum. No duo dolor dissentias, ne sea volutpat theophrastus, illum laoreet nonummy ius ne.
      </figcaption>
    </figure>
  </header>
</div>
<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque leo vitae accumsan egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque volutpat, diam ac rutrum dapibus, sapien sapien lobortis est, nec tincidunt elit risus
    et massa. Sed ultrices posuere nunc non mollis.</p>
  <p>Maecenas dictum interdum odio, eu consequat enim porta eget. Ut fringilla elit a arcu euismod, vel accumsan mauris convallis. Donec nec nunc tempor, imperdiet odio vel, dignissim urna.</p>
  <p>Nullam volutpat facilisis leo eleifend molestie. Nunc dolor magna, molestie nec sollicitudin vel, dignissim in eros. Morbi imperdiet neque vitae magna laoreet, ut aliquet urna pellentesque. Phasellus euismod libero mollis erat feugiat, sed consectetur
    nunc facilisis.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

一种方法。

重要位是min-height:100%和.parent { position: relative; padding-left: 120px; } .menu { background-color: black; color: white; min-height: 100%; width: 100px; position: absolute; left: 0; top: 0; }

＆＃13;

＆＃13;

<div class="parent">
    
    <div class="menu">menu</div>
    
    content content<br>
    content content<br>
    content content<br>
    content content<br>
    content content<br>
    content content<br>
    content content<br>
    
</div>

＆＃13;

cookiecutter.json

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试将菜单元素向左浮动，即<div style="float: right;">，并为其指定固定尺寸。内容应该很好地包装，而不会改变菜单元素的尺寸。

ul {
  background: black;
  color: white;
  float: left;
  margin: 0;
  min-height: 200px;
  width: 150px;
}

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

<h1>Title element</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident pariatur repellat aspernatur alias unde dolore culpa, quae eligendi veritatis quidem quam, cupiditate minus reprehenderit deserunt nisi laborum. Distinctio, consequatur at?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident pariatur repellat aspernatur alias unde dolore culpa, quae eligendi veritatis quidem quam, cupiditate minus reprehenderit deserunt nisi laborum. Distinctio, consequatur at?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident pariatur repellat aspernatur alias unde dolore culpa, quae eligendi veritatis quidem quam, cupiditate minus reprehenderit deserunt nisi laborum. Distinctio, consequatur at?</p>