Question

如何让第二个div（.rightcolumnSmal）完全展开？

代码：

＆＃13;

.wrapper {
  width: 100%;
  height: 100%;
  margin: 2px;
  padding: 2px;
  border: 1px dashed orange;
}
.leftcolumnBig {
  width: 80%;
  height: 100%;
  padding: 0 1px 0 0;
  margin: 1px 1px 1px 1px;
  float: left;
  border: 1px dashed orange;
}
.rightcolumnSmal {
  width: 17%;
  min-height: 100%;
  display: block;
  background-color: #FCFAAC;
  float: right;
  border: 1px dashed orange;
  padding: 0 0 0 1px;
  margin: 1px 1px 1px 1px;
}

＆＃13;

<div class="wrapper">

  <div class="leftcolumnBig">

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor
    sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="rightcolumnSmal">
    Try to fill max down to the end
  </div>

</div>

＆＃13;

也是fiddle。

<小时/> 看起来像this：

＆＃13;

.wrapper {
  width: 100%;
  height: 100%;
  margin: 2px;
  padding: 2px;
  border: 1px dashed orange;
}
.leftcolumnBig {
  width: 80%;
  height: 100%;
  padding: 0 1px 0 0;
  margin: 1px 1px 1px 1px;
  float: left;
  border: 1px dashed red;
}
.rightcolumnSmal {
  width: 17%;
  min-height: 100%;
  display: block;
  background-color: #FCFAAC;
  float: right;
  border: 1px dashed orange;
  padding: 0 0 0 1px;
  margin: 1px 1px 1px 1px;
}

＆＃13;

<div class="wrapper">

  <div class="leftcolumnBig">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor
    sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="rightcolumnSmal">
    Try to fill max down to the end
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

  </div>

</div>

＆＃13;

Answer 1

取决于您对身高的定义以及您对最大值的定义。如果您希望元素延伸到视图高度的100％，则可以使用height：100％，或者我喜欢使用height：100vh。

这是Brett East在你的文章中发布的一个jsfiddle。

但是，如果您希望页面在用户将向下滚动的屏幕上的单独元素中具有足够的内容，并且div将达到内容的最低范围，则需要将一个元素设置为意识到其他因素。以下是我在过去的项目中用来完成的一些JavaScript。

var height = $('.element-with-content').height();
$('.element-to-have-matching-height').css({ 'height': height });

Answer 2

.rightcolumnSmal {
     width: 17%;
     min-height: 100vh;
     display: block;
     background-color: #FCFAAC;
     float: right;
     border: 1px dashed orange;
     padding: 0 0 0 1px;
     margin:1px 1px 1px 1px;
}

最小高度需要为100vh，而不是100％。 100vh是页面的高度。

Answer 3

删除浮动并将显示设置为display:table-cell;和leftcolumnBig div的表格单元格（rightcolumnSmal）：

<强> jsFiddle example

Answer 4

您可以使用表格使它们具有相同的高度：http://jsfiddle.net/fba2mbkt/6/

.mainwrapper{
    display: table;
    height: 100%;
}

.leftcolumnBig {
     display: table-cell;
     width: 80%;
     border: 1px dashed orange;
}

.rightcolumnSmal {
     display: table-cell;
     width: 17%;
     background-color: #FCFAAC;
     border: 1px dashed blue;
     padding: 0 0 0 1px;
     margin:1px 1px 1px 1px;
}

将div拉伸到最大高度

4 个答案: