Question

我有一个容器div框，其中包含三个左浮动div。左边是我的左侧边栏，中间是内容区域，右边是右侧边栏。容器高度取决于内部最大的div。我想要的是所有三个内部div总是有100％的容器高度。我尝试了100％高度和100％最小高度，但两个较小的div盒只扩展到那里的内容大小。

我无法将容器高度设置为100％，因为上面和下面都有其他一些东西。

<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>

请参阅jsFiddle

Answer 1

Flexbox可以做到这一点。

＆＃13;

#container {
  width: 90%;
  margin: 1em auto;
  display: flex;
  border: 1px solid grey;
}
[id*="col"] {
  padding: .25em;
  background: lightblue;
  border: 1px solid green;
  width: 33%;
}

＆＃13;

<div id="container">
  <div id="col1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam natus amet perferendis voluptatibus repudiandae accusamus unde consectetur, veritatis quod dolorem ullam, ipsum odio numquam? Itaque?</div>
  <div id="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit ex nihil, eligendi deleniti rem. Quam saepe, tempore nesciunt dignissimos neque quasi tenetur corrupti, rem ipsa sapiente cum tempora excepturi. Dicta eum reprehenderit, soluta esse quibusdam
    quisquam deserunt quidem, quo, quos numquam nisi omnis eius possimus! Rem nulla, molestiae aliquam facere!</div>
  <div id="col3">Lorem ipsum dolor sit.</div>
</div>

＆＃13;

Answer 2

使用此CSS：

#container { display: table; }
#col1, #col2, #col3 { display: table-cell; }

这是一个小提琴：https://jsfiddle.net/aL5apudm/ （#container width是100％，flex和float设置被取出）

Answer 3

html

if (sr_index>MWPivot.Items.Count)
{
    MWPivot.Items.Add(service_requestPivotItem);
} else {
    MWPivot.Items.Insert(sr_index, service_requestPivotItem);
}

<强> CSS

<div class="container">
      <div class="l">sdffff<br/>fffffffffffffff<br/>fffffffffffffffffff</div>
     <div class="c">fffffffff</div>
     <div class="r">ffffffffffffffffffffffffff</div>
</div>

demo

Answer 4

成功完成:-D

＆＃13;

.table {
  display: table;
  height: 100%;
  border: solid red;
}
.cell {
  border: 2px solid black;
  vertical-align: top;
  display: table-cell;
  height: 100%;
}
.container {
  height: 100%;
  border: 2px solid green;
  -moz-box-sizing: border-box;
}

＆＃13;

<div class="table">
  <div class="cell">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>
  <div class="cell">
    <div class="container">Text</div>
  </div>
  <div class="cell">
    <div class="container">Text</div>
  </div>
</div>

＆＃13;

Answer 5

设置.col2上的侧边栏颜色和#container { background-color:silver; } body, #col2{ background-color:white; }上的正文背景颜色：

#container {
  background: linear-gradient(to right, #cccccc 0%,#cccccc 20%,#ffffff 20%,#ffffff 80%,#deccde 80%,#deccde 100%);
}

小提琴https://jsfiddle.net/zuncevka/5/

使用渐变可以解决不同的侧边栏颜色：

{{1}}

https://jsfiddle.net/zuncevka/4/

3列，高度100％

5 个答案: