Question

我有一个父div，其高度是动态设置的，因此可以根据用户设置进行更改。现在我有一个子div，我要设置该div的内容，以使父div的高度发生变化，该内容仍应在定义的规格之内。例如：我想要：padding: 40px 54px 54px;围绕子div设置，而不管父母的身高设置为什么高度。

HTML：

<div class="parent" style="height:180px">
    <div class="child">
        <header>title</header>
        <div>test11</div>
        <button>
            Test
        </button>
        <button>
            Cancel
        </button>
    </div>
</div>

CSS：

.parent {
    max-height: 300px;
    margin: 0 auto;
    background-color: #fff;
    position: fixed;
    top: 20%;
    left: 20%;
    border: 1px solid #000;
    width: 234px;
}

.child {
    padding: 40px 54px 54px;
    height: 86px;
}

提琴： https://jsfiddle.net/5thk641u/15/

从上面的小提琴中可以看到，当我尝试将父类的高度从180px更改为250px时，底部填充增加，从按钮到父div的距离也增加。我要实现的是更改父级的高度时，子div的高度相对增加，以便按钮和其他内容保持其填充。

我不确定这是否可以实现，对此有何想法？

Answer 1

Hope this is what you are looking for

  # A tibble: 1,000 x 3
       id                 V1              What is your favorite color?   What is your favorite band?   What is the difference between you and me?                                                 
     1 aaa                               NA                              NA                            NA                                                        
     2 aaa                               NA                              NA                            NA                         
     3 aaabb                             NA                              NA                            NA                                                
     4 aaabb                             NA                              NA                            NA
     5 ccc                               NA                              NA                            NA                                          
     6 ccc                               NA                              NA                            NA               
    # ... with more rows

Answer 2

JsFiddle

.child {
    padding: 40px 54px 54px;
    height: inherit;
    box-sizing: border-box;
}

在您的height:inherit类中添加height:100%或box-sizing:border-box和.child。高度继承/ 100％将在您的孩子div中应用父级高度。

JsFiddle (Your Code)

JsFiddle (My Code)

例如，我在height:280px类中设置了.parent。您可以看到子类的背景颜色区域。我希望这个答案能解决您的问题。

Answer 3

我已经更新了代码，现在子div将是vertically centre always，因此是parent div height。

Note：在全角窗口上检查此页面。因为上级div具有您指定的position: fixed; CSS。使用以下代码：

.parent {
    max-height: 300px;
    margin: 0 auto;
    background-color: #fff;
    position: fixed;
    top: 20%;
    left: 20%;
    border: 1px solid #000;
    width: 234px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}
.child {
  padding: 54px;
  height: auto;
}

  <div class="parent" style="height:280px">
    <div class="child">
    <header>title</header>
    <div>test11</div>
    <button>
    Test
    </button>
    <button>
    Cancel
    </button>
    </div>
    </div>

Answer 4

子框在父框中垂直居中。这是代码段，

.parent {
  max-height: 300px;
  margin: 0 auto;
  background-color: #fff;
  position: fixed;
  top: 20%;
  left: 0;
  border: 1px solid #000;
  width: 234px;
}
.child { /* No height, only verticaly centered */
  position: relative;
  padding: 40px 54px 54px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

<div class="parent" style="height:180px">
  <div class="child">
  <header>title</header>
  <div>test11</div>
    <button>Test</button>
    <button>Cancel</button>
  </div>
</div>

如何使子高度相对于父高度Css

4 个答案: