使嵌套div拉伸到父高度

Question

基本上我正在创建一些论坛，例如我们正在查看一个帖子，用户信息在左边，线程的内容在右边，然后是用户的签名。

现在，我正在尝试将左侧的用户信息延伸到其容器的高度......

http://prntscr.com/7dbdww

.topic {
    width: 100%;
    display: inline-block;
    border: 1px solid #444;
    margin-bottom: 20px;
    position: relative;
}
.topic-header {
    width: 100%;
    height: 40px;
    display: block;
    background-color: #CD422B;
    border-left: 1px solid #CD422B;
    border-right: 1px solid #CD422B;
}
.topic-header h4 {
    color: #fff;
    font-family: 'Titillium Web', sans-serif;
    font-size: 18px;
    font-weight: 700;
    padding-left: 10px;
    line-height: 40px;
    margin: 0;
}
.topic-userinfo {
    width: 20%;
    min-height: 200px;
    display: inline-block;
    position: relative;
    float: left;
    left: 0;
    background-color: #555;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
}
.topic-usersig {
    width: 80%;
    height: 150px;
    max-height: 300px;
    display: inline-block;
    overflow-y: auto;
    position: relative;
    float: right;
    right: 0;
    background-color: #323232;
    border-top: 1px dashed #444;
}
.topic-body {
    width: 80%;
    min-height: 200px;
    display: inline-block;
    position: relative;
    float: right;
    right: 0;
    background-color: #323232;
    color: #fff;
}

那是css ^这里是html

<div class="topic">
    <div class="topic-header">
        <h4><i class="fa fa-fw fa-comment"></i> Test</h4>
    </div>
    <div class="topic-userinfo">
        <div class="userinfo-box">
            <center>
                <span class="userinfo-name admin-color">
                    <a href="http://www.skruffysdeveloper.com/users/index.php?username=deaL">deaL</a>
                </span>
                <span class="userinfo-rank">
                    Administrator
                </span>
                <img src="http://www.skruffysdeveloper.com/assets/img/user_img_default.png" style="border: 1px solid #333; width: 90px; height: 90px;">
            </center>
        </div>
        <center>
            Joel Evans
        </center>
    </div>
    <div class="topic-body">
        <div class="topic-content">test2</div>
    </div>
    <div class="topic-usersig">
        <div style="margin: 10px"></div>
    </div>
</div>

Answer 1

仅将高度设置为100％对我来说无效。我也把这个div的位置改为绝对。

CSS

.topic-userinfo {
    width: 20%;
    height: 100%;
    display: inline-block;
    position: absolute;
    float: left;
    left: 0;
    background-color: #555;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

JSFiddle

Answer 2

将这些css用于父级

fullPrice * discount

将这些css用于孩子

.parent {
overflow: hidden;
position: relative;
width: 100%;
      }

Answer 3

使用height:100%

.topic-userinfo {
    width: 20%;
    min-height: 200px;
    display: inline-block;
    height:100%;
    position: relative;
    float: left;
    background-color: #555;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

Answer 4

Marks Answer几乎是完美的，除了因为标题而延伸到一点点。如果我们偏移标题，那就完美了。

.topic-userinfo {
    width: 20%;
    height: calc(100% - 40px);
    display: inline-block;
    position: absolute;
    float: left;
    left: 0;
    background-color: #555;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

https://jsfiddle.net/1pntme1x/1/

Answer 5

手头的主要问题是你需要左浮动的孩子.topic-user-info占据父母的100％身高。但是父母的身高默认是自动的，这意味着它会调整身高以适应孩子。这就是为什么简单地将height:100%放在浮动的左边孩子上是行不通的。

解决方案是绝对定位左子节点，并将线程内容和签名浮动到右侧。如果您的标记正确完成，那么它就变得非常容易了。我个人认为HTML很差 - 非语义标签，使用不推荐的标签<center>，大量的内联样式。最好的办法就是重写它们。

* {
  box-sizing: border-box;
}
.topic {
  width: 100%;
  display: inline-block;
  border: 1px solid #444;
  margin-bottom: 20px;
  position: relative;
}
.topic-header {
  display: block;
  width: 100%;
  height: 40px;
  background-color: #CD422B;
  border-left: 1px solid #CD422B;
  border-right: 1px solid #CD422B;
}
.topic-header h4 {
  color: #fff;
  font-family: 'Titillium Web', sans-serif;
  font-size: 18px;
  font-weight: 700;
  padding-left: 10px;
  line-height: 40px;
  margin: 0;
}
.topic-user-info {
  position: absolute;
  padding: 0 10px;
  height: calc(100% - 40px);
  width: 20%;
  min-width: 130px;
  background-color: #555;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}
.topic-user-info > .public-profile {
  position: relative;
  margin: 10px auto;
  background-color: #fff;
}
.topic-user-info > .public-profile > .screen-name {
  color: red;
}
.topic-user-info > .public-profile > .rank {
  color: #000;
}
.topic-user-info > .public-profile > .avatar {
  width: 90px;
  height: 90px;
  border: 1px solid #333;
}
.topic-body {
  float: right;
  width: 80%;
  min-height: 500px;
  background-color: #323232;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
}
.topic-content {
  padding: 20px;
  min-height: 200px;
}
.topic-usersig {
  padding: 20px;
  height: 150px;
  max-height: 300px;
  background-color: #323232;
  border-top: 1px dashed #444;
}

<article class="topic">
  <header class="topic-header">
    <h4>Test</h4>
    <!-- maybe other things in header -->
  </header>

  <section class="topic-user-info">
    <article class="public-profile">
      <div class="screen-name">deaL</div>
      <div class="rank">Administrator</div>
      <img class="avatar" src="http://www.skruffysdeveloper.com/assets/img/user_img_default.png" alt="" />
    </article>
    <div class="user-real-name">Joel Evans</div>
  </section>
  <section class="topic-body">
    <section class="topic-content">
      <h3>Test2</h3>
    </section>

    <section class="topic-usersig">
      Some signature here
    </section>
  </section>
</article>

Answer 6

此代码存在一些严重问题，以及大多数答案：

• <center>标记已被弃用了很长时间。使用CSS text-align属性。

• 同时使用float: right / left和display: inline-block没有意义。 display的计算值为block，regardless。

• 使用float然后使用position: absolute也毫无意义。 float的计算值为none。

• 对明确用作块级元素的元素使用display: inline-block。

• 包含固定宽度元素的侧栏上的百分比宽度。这不会很好地缩小。

• 流氓内联样式。

你的CSS混乱，因为你的标记结构很差。通过平衡您的标记和样式，您可以实现预期的外观，而无需在任何一方进行任何黑客攻击。有时候会更多。

这是一个简单示例，其中.topic-user-info将始终与.topic-message和.topic-signature元素组合的高度相匹配。没有花车，只有一个position: absolute，还有一些不错的语义标记。

DEMO

＆＃13;

＆＃13;

.topic {
  width: 100%;
  border: 1px solid #444;
}

.topic-header {
  width: 100%;
  height: 40px;
  background-color: #CD422B;
}

.topic-content {
  padding-left: 180px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  
  color: white;
}

.topic-user-info {
  position: absolute;
  width: 180px;
  height: 100%;
  left: 0;
  
  background-color: #444;
  
  text-align: center;
}

.topic-body {
  width: 100%;
  background-color: #323232;
}

.topic-message,
.topic-signature {
  padding: 10px;
  box-sizing: border-box;
}

.topic-message {
  min-height: 180px;
}

.topic-signature {
  min-height: 120px;
  border-top: 1px dashed #444;
}

＆＃13;

<div class="topic">
  <header class="topic-header">Header</header>
  <section class="topic-content">
    <div class="topic-user-info">User Info</div>
    <article class="topic-body">
      <div class="topic-message">
        <p>Message</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed et deleniti rem, odio sit perspiciatis quasi dignissimos repellat inventore sequi cupiditate vel quam, asperiores nisi magni, quaerat at autem id dolorem! Dolor, nobis! Fuga nisi aut deserunt in delectus nam quidem ea asperiores, animi nihil. Delectus, ab nisi. Possimus, laborum quos impedit atque eius ex ab enim a amet omnis ullam totam facere sed necessitatibus aut nihil reprehenderit sequi optio doloremque rerum voluptatum ea adipisci minus, molestias modi. Numquam iste, ducimus consequatur deleniti dolores explicabo. Doloremque odio placeat deleniti ipsam consequatur beatae eius doloribus reiciendis ut sit unde distinctio modi voluptates expedita sint ad, earum asperiores aliquid est architecto autem in, quibusdam officiis! Distinctio, eos quaerat, id illum aliquam aut.</p>
      </div>
      <aside class="topic-signature">
        <p>Signature</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti delectus laudantium minima magni temporibus distinctio, aut modi saepe deserunt praesentium eligendi qui quod, ratione omnis exercitationem officiis repellendus adipisci eum molestias vitae, sed. Atque dicta in veniam ducimus voluptatem quasi accusantium, temporibus esse, aliquid itaque explicabo omnis, delectus expedita rem.</p>
      </aside>
    </article>
  </section>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 7

高度100％有时似乎不能正常工作。我们可以使用一个小的Js函数来处理这个问题。

我们已将同一类'EqHeightDiv'添加到我们想要具有相同高度的两个div中。然后在document ready js。

中添加以下代码

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
  equalHeight($(".EqHeightDiv"));

函数将从两个div返回最高div的高度，并将该高度附加到较短的div。