Question

我想在一个＆＃39;包装＆＃39; -div中创建三个div。我想要三个div，让我们称他们为“他们”，“中心”和“中心”。和“正确的”，就像三列彼此相邻一样。列以正确的方式显示，高度占据屏幕的100％，但是当我在中心div中添加更多文本时，我希望div占据屏幕的所有可用高度。就像你在下面的片段中看到的那样， div的高度不会像我想要的那样垂直伸展 。

我尝试将div更改为table和table-cell显示，但我无法将其工作。除此之外，我尝试用绝对和亲戚的位置搞乱，但我也无法让它发挥作用。

在实际情况中，居中的div占用宽度为1024px，左右div的宽度为50％-512px。

我正在寻找一种方法来解决这个问题，但我仍然无法让它发挥作用。

＆＃13;

html, body{
  margin: 0;
  padding: 0;
  height: 400px;
  }
div#menu{
  height: 30px;
  background-color: green;
  width: 600px;
  }
div#wrapper{
  
  height: 100%;
  width: 100%;
  
  }
div#left{
  background-color: yellow;
  float: left;
  width: 100px;
  height: 100%;
  }
div#center{
  width: 400px;
  background-color: red;
  height: 100%;
  float: left;
  }
div#right{
  width: 100px;
  float: left;
  height: 100%;
  background-color: blue;
  }

＆＃13;

<html>
  <body>
    <div id="menu">
      menu-item 1, menu-item 2, menu-item 3
    </div>
    <div id="wrapper">
      <div id="left">
      </div>
      <div id="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eleifend tellus eget odio cursus, id dignissim dolor tincidunt. Maecenas libero quam, scelerisque tincidunt est sit amet, consequat faucibus massa. Fusce at varius nunc. Integer mattis velit purus, nec dignissim ipsum pulvinar eget. Nulla facilisi. Suspendisse tempor, turpis eu convallis commodo, erat elit cursus sem, vel dignissim augue urna sit amet purus. Fusce accumsan risus neque, a dapibus velit mollis in. Aliquam varius euismod lorem sit amet bibendum. Donec tempus neque ac interdum pulvinar.

Nulla id iaculis magna. Ut dui lorem, porttitor eget volutpat vel, interdum at nibh. Duis rhoncus, eros ut pharetra euismod, metus metus elementum enim, id egestas sem arcu sit amet nisl. Quisque sed aliquam est. Vivamus bibendum sapien sit amet nisi auctor, et congue elit cursus. Praesent feugiat ex ex, in elementum augue efficitur a. Sed a felis ut est pharetra venenatis eu ac metus. Donec sed nisl semper, dignissim est ac, faucibus dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras bibendum nulla dolor, et tincidunt ligula hendrerit ac.

Integer et tincidunt ante, tincidunt hendrerit lacus. Nullam viverra id enim et viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean ullamcorper posuere pharetra. Nullam ac quam eu nisl vulputate condimentum quis eu ante. Mauris vel egestas tortor. Ut suscipit ex ac commodo pharetra. Sed pharetra convallis ornare. Curabitur posuere dictum sapien, et rutrum nulla tempor sit amet. Nulla sagittis massa quis vulputate vehicula. Proin dignissim lorem vel neque finibus, ut sodales dolor sollicitudin. Maecenas finibus leo non lorem porttitor condimentum. Aenean nec odio id nulla scelerisque bibendum.

Fusce feugiat sem turpis, id iaculis dui condimentum vel. Vivamus tempus semper ultricies. Vestibulum egestas viverra blandit. Nunc leo justo, semper ut elit in, luctus pharetra nibh. Cras ac lectus egestas quam interdum vehicula. Vivamus pulvinar sapien sed gravida pharetra. Mauris hendrerit congue augue, quis vulputate mauris vulputate at. Nulla sit amet ullamcorper ante.

In lobortis sem id arcu dignissim pretium. Sed vulputate eleifend leo. Donec eget risus sit amet ante molestie porta. Phasellus massa diam, lacinia ac imperdiet ut, molestie vitae nisl. Pellentesque tristique ligula lacus, eu tempus est feugiat vitae. Ut ac tincidunt nunc. Nulla et lectus quam. Aenean auctor tempus nibh sed efficitur. Nam blandit dictum ligula bibendum mollis. Proin mollis lorem at viverra porttitor. Duis placerat bibendum libero, id vulputate quam posuere id. Vestibulum vel ex mollis, tempor tortor et, suscipit risus. In augue dui, bibendum et tempus id, hendrerit vitae sapien. Aliquam erat volutpat.
      </div>
      <div id="right">
      </div>
    </div>
  </body>
</html>

＆＃13;

Answer 1

您是否尝试过使用flexbox？您可以使用以下内容使它们具有相同的高度：

#wrapper{
    display: flex;
    flex-direction: row;
}
#left, #center, #right {
    display: flex;
}

https://jsfiddle.net/rxdd4mdd/

更新

我查看了您发布链接的网站，您需要用以下内容替换css中的以下规则：

#profile-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
}

#profile-wrapper .left, 
#profile-wrapper .right {
    background-color: #ebebeb;
    display: flex;
    flex: 1;
}

#profile-wrapper #profile-page {
    width: 1024px;
    display: flex;
    flex-direction: column;
}

我已在此处发布了已编辑网页的完整HTML：http://pastebin.com/9PvQvfiU

更新2：

这应该确保它至少是身体高度的100％：

body {
    display: flex;
    flex-direction: column;
}
#profile-page {
    flex: 1;
}

Answer 2

使用样式高度：自动; for wrapper div

#wrapper {
width: 600px;
height: auto;
}

https://jsfiddle.net/kn9spjhn/

Div占用所有可用高度

2 个答案:

更新

更新2：