Question

在下面的小提琴中，我试图通过使用父级的100％宽度和高度来获取.content div来填充父级（.side-child）的高度。 .side-child div具有正确的高度，唯一的问题是让.content imgs填充他们的父级（同时保持宽高比）。

https://jsfiddle.net/d6L2bve9/5/

<div id="side">
<div class="side-child">
    <img src="https://www.icann.org/assets/icann_logo-52672386035a35504af59606040687c8.png" class="content" />
</div>
<div class="side-child">
        <img src="https://www.icann.org/assets/icann_logo-52672386035a35504af59606040687c8.png" class="content" />

</div>
<div class="side-child">
        <img src="https://www.icann.org/assets/icann_logo-52672386035a35504af59606040687c8.png" class="content" />

</div>
</div>

CSS

#side {
height : 100vh;
display : flex;
flex-direction : column;
width : 50px;
}

.content {
height : 100%;
background : #ff0000;
}

.side-child {
flex-grow : 1;
}

我可以通过将.side-child位置设置为relative，将.content设置为绝对值

来使其工作

https://jsfiddle.net/5sgfcjy4/2/

但我不明白为什么我必须这样做，因为.side-child已经有正确的身高？我猜测它因为技术上.side-child div没有高度值所以100％不能使用？

Answer 1

您还可以使用以下代码实现此目的：

{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}
<title>Raxak Protect</title>
{% endblock title %}

{% block css %} 
<link  href="{% static 'css/protect.css' %}" type="text/css" rel="stylesheet" media="screen,projection">
{% endblock css %}

{% block header %}
{% include 'protect/header.html' %}
{% endblock header %}

{% block navigation %}
<div id="container" ng-app="raxak_protect" ng-init="auth.user={{ user.cpeUser.id }}; auth.username ='{{ user.username }}'">
    {% include 'protect/protect_navigation.html' %}
    {% block content %}
    {% endblock content %}
    <div ui-view="">
    </div>
</div>
{% endblock navigation %}

{% block footer %}
{% include 'protect/footer.html' %}
{% endblock footer %}

{% block js %}

<script type="text/javascript" src="{% static 'js/raxak_protect.js' %}"></script>

<script type="text/javascript" src="{% static 'js/controllers.js' %}"></script>

<script type="text/javascript" src="{% static 'js/b_controllers.js' %}"></script>

</script>
{% endblock js %}

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.column { 
  -webkit-flex-direction: column; 
  flex-direction: column; 
  float: left;
}
.column li {
  background: deepskyblue;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 50px;
  height: 50px;
  margin: 5px;
  
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

Answer 2

这对你有用吗？

#side {
  height : 100vh;
  display : flex;
  flex-direction : column;
  width : 50px;
}

.content {
  flex: 1 auto;
  background : #ff0000;
}

.side-child {
  display: flex;
  width : 100%;
  height : 100%;
}

<div id="side">
  <div class="side-child">
    <div class="content">
      1
    </div>
  </div>
  <div class="side-child">
        <div class="content">
      2
    </div>
  </div>
  <div class="side-child">
        <div class="content">
      3
    </div>
  </div>
</div>

Answer 3

另一种方法。

#side {
  height : 100vh;
  display : flex;
  flex-direction : column;
  width : 50px;
}

.content {
  width : 100%;
  background : #ff0000;
}

.side-child {
  flex-grow: 1;
  display: flex;
  align-self: stretch;
}

https://jsfiddle.net/d6L2bve9/2/

Answer 4

我最后这样做了

    #side {
    height : 100vh;
    display : flex;
    flex-direction : column;
    width : 50px;
    }

    .content {
    height : 100%;
    background : #ff0000;
    position : absolute;
    }

    .side-child {
    flex-grow : 1;
    position : relative;
    }

https://jsfiddle.net/5sgfcjy4/2/

具有100％宽度和高度的flex增长的父项的子项不会填充父项

4 个答案: