使Div垂直填充其父级

时间：2018-07-04 12:17:09

标签： html css

我正在尝试使2个div并排出现在其父级中，并同时垂直填充父级。我尝试将高度和最小高度设置为100％，但是我不明白为什么它不起作用。

这是我的html：

<div class="calc-wrap clear">
  <h2>Title</h2>
   <div class="calc-content clear">
    <div class="calc-form">
      <form id="cost_calculator">
        <fieldset>
          <legend>
            <h3>Find out how much your stuff costs you</h3>
          </legend>
          <ol>
            <li class="one">
              <label for="cost_of_pack">quantity</label>
              <span class="pound-label">£</span>
              <input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
            </li>
            <li class="two">
              <label for="quantity_smoked">How many per day?</label>
              <input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
            </li>
          </ol>
        </fieldset>
      </form>
    </div>
    <div class="calc-save">
      <div class="calc-results-content clear">
        <h3>Results</h3>
        <div class="calc-results">
          <div>
            <p id="weekly_cost">£<span>0.00</span> per week</p>
            <p id="monthly_cost">£<span>0.00</span> per month</p>
            <p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
          </div>
        </div>
        <div class="calc-quitnow">
          <p>Well done</p>
        </div>
      </div>
    </div>
  </div>
</div>

和CSS：

.calc-content {
  display: inline-block;
  border: 3px solid blue;
  width: 100%;
  border-color: #87B7CD;
}

.calc-form,
.calc-save {
  height:100%;
  border: 1px solid red;
  float: left;
}

.calc-form {
  width: 60%;
}

.calc-save {
  width: 39%;
  background-color: #87B7CD;
}

.calc-results {
  float: left;
  width: 60%;
}

还有一个JS Fiddle

任何帮助将不胜感激。

6 个答案:

答案 0 :(得分：0)

这是因为父<div>没有定义的height，因此显然，子元素无法填充父100%的{​​{1}}。

将height添加到您父母的班级height中，例如calc-content。

height: 200px;

答案 1 :(得分：0)

一种方法是在display: flex规则中使用display: inline-flex或.calc-content。

答案 2 :(得分：0)

您要这样做吗？

已将height中的.calc-form, .calc-save从.calc-content中删除，并将display: flex;修改为   .calc-content { display: flex; border: 3px solid blue; width: 100%; border-color: #87B7CD; } .calc-form, .calc-save { border: 1px solid red; float: left; } .calc-form { width: 60%; } .calc-save { width: 39%; background-color: #87B7CD; } .calc-results { float: left; width: 60%; } 

<div class="calc-wrap clear">
  <h2>Title</h2>

  <div class="calc-content clear">
    <div class="calc-form">
      <form id="cost_calculator">
        <fieldset>
          <legend>
            <h3>Find out how much your stuff costs you</h3>
          </legend>
          <ol>
            <li class="one">
              <label for="cost_of_pack">quantity</label>
              <span class="pound-label">£</span>
              <input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
            </li>
            <li class="two">
              <label for="quantity_smoked">How many per day?</label>
              <input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
            </li>
          </ol>
        </fieldset>
      </form>
    </div>
    <div class="calc-save">
      <div class="calc-results-content clear">
        <h3>Results</h3>
        <div class="calc-results">
          <div>
            <p id="weekly_cost">£<span>0.00</span> per week</p>
            <p id="monthly_cost">£<span>0.00</span> per month</p>
            <p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
          </div>
        </div>
        <div class="calc-quitnow">
          <p>Well done</p>
        </div>
      </div>
    </div>
  </div>
</div>
$(document).on("click", ".logincontent", function() {
    $(this).toggleClass("switch");
});

答案 3 :(得分：0)

您可以使用“ Flex的力量”！ ;）

.calc-content {
  display: flex;
  /*display: inline-block;*/
  border: 3px solid blue;
  width: 100%;
  border-color: #87B7CD;
}

.calc-form,
.calc-save {

  border: 1px solid red;
  /*float: left;*/
}

.calc-form {
  width: 60%;
}

.calc-save {
  width: 39%;
  background-color: #87B7CD;
}

.calc-results {
  float: left;
  width: 60%;
}
<div class="calc-wrap clear">
  <h2>Title</h2>

  <div class="calc-content clear">
    <div class="calc-form">
      <form id="cost_calculator">
        <fieldset>
          <legend>
            <h3>Find out how much your stuff costs you</h3>
          </legend>
          <ol>
            <li class="one">
              <label for="cost_of_pack">quantity</label>
              <span class="pound-label">£</span>
              <input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
            </li>
            <li class="two">
              <label for="quantity_smoked">How many per day?</label>
              <input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
            </li>
          </ol>
        </fieldset>
      </form>
    </div>
    <div class="calc-save">
      <div class="calc-results-content clear">
        <h3>Results</h3>
        <div class="calc-results">
          <div>
            <p id="weekly_cost">£<span>0.00</span> per week</p>
            <p id="monthly_cost">£<span>0.00</span> per month</p>
            <p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
          </div>
        </div>
        <div class="calc-quitnow">
          <p>Well done</p>
        </div>
      </div>
    </div>
  </div>
</div>

答案 4 :(得分：0)

在display: flex上使用calc-content，并将form元素保留在fieldset元素内，如下所示。现在还需要浮动。

.calc-content {
  display: flex;
  border: 3px solid blue;
  width: 100%;
  border-color: #87B7CD;
}

.calc-form,
.calc-save {
  height: 100%;
  border: 1px solid red;
}

.calc-form {
  width: 60%;
}

fieldset {
  width: 60%;
}

.calc-save {
  width: 40%;
  background-color: #87B7CD;
}

.calc-results {
  float: left;
  width: 60%;
}
<div class="calc-wrap clear">
  <h2>Title</h2>

  <div class="calc-content ">


    <fieldset>
      <legend>
        <h3>Find out how much your stuff costs you</h3>
      </legend>
      <form id="cost_calculator">
        <ol>
          <li class="one">
            <label for="cost_of_pack">quantity</label>
            <span class="pound-label">£</span>

            <input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
          </li>
          <li class="two">
            <label for="quantity_smoked">How many per day?</label>
            <input type="number" id="quantity_smoked" name="quantity_smoked" value="0">

          </li>
        </ol>
      </form>
    </fieldset>

    <div class="calc-save">
      <div class="calc-results-content clear">
        <h3>Results</h3>
        <div class="calc-results">
          <div>
            <p id="weekly_cost">£<span>0.00</span> per week</p>
            <p id="monthly_cost">£<span>0.00</span> per month</p>
            <p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
          </div>
        </div>
        <div class="calc-quitnow">
          <p>Well done</p>
        </div>
      </div>
    </div>
  </div>
</div>

答案 5 :(得分：0)

.parentDiv {
  height: 250px;
  background: black;
  display:flex;
}

.childDiv {  
  width:50%;
  background: grey;
  padding:10px;
  border:1px solid black
}
<div class="parentDiv">
  <div class="childDiv">
    text1
  </div>
  <div class="childDiv">
    text2
  </div>
</div>

相关问题
最新问题