Question

我有以下html标记：

＆＃13;

.container {
  border: 1px solid green;
}
.right {
  border: 1px solid #000;
  float: right;
  width: 40px;
}
.left {
  border: 1px solid red;
  overflow: hidden;
}

＆＃13;

<div class="container">
  <div class="right">Right</div>
  <div class="left-container">
    <div class="left">
        Left fluid
        <br/>
        multiple rows
    </div>
  </div>
</div>

＆＃13;

你可以看到正确的块看起来很难看。我怎样才能使元素流体高度达到100％？

Answer 1

添加规则height:100%正确的div，然后移除float:right。我将其更改为position:absolute，因此您不需要容器的高度。

.container {
  border: 1px solid green;
  position: relative;
  width: 100%;
}
.right {
  border: 1px solid #000;
  width: 40px;
  height: 100%;
  position: absolute;
  right: 0;
}
.left {
  display: block;
  border: 1px solid red;
  overflow: hidden;
  margin-right:40px;
}

<br><br><div class="container">
  <div class="right">Right</div>
  <div class="left-container">
    <div class="left">
        Left fluid
        multiple rows a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence.
    </div>
  </div>
</div>

Answer 2

如果您的应用程序将在现代浏览器中运行，那么使用flexbox是一个很好的方法：http://jsfiddle.net/2hn9zgog/。

HTML：

<div class="container">
    <div class="right">Right</div>
    <div class="left">
        Left fluid
        <br/>multiple rows
    </div>
</div>

CSS：

.container {
    display: flex;
    width: 100%;
    outline: 1px dotted gray;
}

.right {
    order: 2;
    flex: 0 0 auto;
    border: 1px solid green;
}

.left {
    flex: 1 0 auto;
    border: 1px solid red;
}

Answer 3

添加明确：两者;浮动元素后。

<div class="right"></div>
<div style="clear: both"></div>

Answer 4

添加

html, body{
height: 100%;
min-height: 100%;
}

.your-container{
height: 100%;
}

如何使浮动元素达到100％的高度？

4 个答案: