代码之家  ›  专栏  ›  技术社区  ›  Steve W

使div垂直填充其父级[复制]

css html
  •  0
  • Steve W  · 技术社区  · 6 年前

    这个问题已经有了答案:

    我试着让两个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 回复  |  直到 6 年前
        1
  •  0
  •   ReSedano    6 年前

    你可以使用“弹性力量”!;) 

    .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>
        2
  •  0
  •   rojadesign    6 年前

    这是因为父母 <div> 没有定义 height ,所以很明显,children元素不能填充 100% 父母的 高度 是的。

    添加 高度 去你父母的班级 calc-content ,例如 height: 200px; . 

    calc-content {
  display: inline-block;
  border: 3px solid blue;
  width: 100%;
  height: 200px;
  border-color: #87B7CD;
}
        3
  •  0
  •   joel    6 年前

    一种方法是 display: flex 或 display: inline-flex 在你的 .calc-content 规则。

        4
  •  0
  •   Nandita Sharma    6 年前

    使用 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
  •   Sinto    6 年前

    你想这样做吗:

    远离的 height 从 .calc-form, .calc-save &修改(amp;M) .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>
        6
  •  0
  •   Gayashan Perera    6 年前 

    .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>
    推荐文章
    Softly  ·  单选按钮未按预期取值
    1 年前
    NovoMannen  ·  导航中的下拉菜单在内容后面重叠
    1 年前
    Thirumal isireddy  ·  在导航栏顺风css中,img被扭曲,而不是将元素推到旁边
    1 年前
    eXor420  ·  如何在脚本标记中使用导出的函数?
    1 年前
    Hadi  ·  如何在无效和有效输入中选择用于更改样式的psoudo元素(after)
    1 年前
    IonicMan  ·  剑道网格在宽度过大时不显示某些列
    1 年前
    Kernier  ·  如何将数学公式支持添加到StacksEditor?
    1 年前
    Md. Ibrahim  ·  CSS网格项溢出小屏幕滚动
    1 年前
    Arjun V Srivatsa  ·  如何将系统时区信息分配给javascript中的变量?
    1 年前
    Akshay mek  ·  Vscode扩展建议不适用于某些文件夹
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号