0

I want to create an automatic scaling layout without using the height property. I use a float layout between two divs, as shown in the image. The boxes in the middle have content of different size and I want the boxes to scale in such way, that all have the same height.

Picturey picture

4

4 回答 4

3

尝试在 css-tricks阅读这篇文章。

我最喜欢的选择可能是来自 Paul Irish 在HTML5Rocks上的博客的那个——但它确实依赖于现代浏览器。我根据他的代码创建了一个JSFiddle ：

CSS

.box {
  /* basic styling */
  width: 100%;
  height: 95px;
  border: 1px solid #555;
  font: 14px Arial;
  /* flexbox setup */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  display: -moz-box;
  -moz-box-orient: horizontal;
  display: box;
  box-orient: horizontal;
}

.box > div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
}

/* our colors */
.box > div:nth-child(1){ background : #FCC; }
.box > div:nth-child(2){ background : #CFC; }
.box > div:nth-child(3){ background : #CCF; }

HTML

<div class="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

但是请注意，这不适用于旧版浏览器，如果您针对这些浏览器，我建议您只采用表格布局。

于 2013-07-01T09:30:20.143 回答
1

我做了一个JsFiddle。

我基本上做的是position:absolute结合使用top和bottomCSS 属性来强制内部 div 占据全高。

HTML：

<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>

CSS：

body{
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#top{
    width: 100%;
    height: 30px;
    background: blue;
    position: absolute;
}

#bottom{
    width: 100%;
    height: 30px;
    background: yellow;
    position: absolute;
    bottom: 0px;
}

#middle{
    width: 30%;
    position: absolute;
    top: 30px;
    bottom: 30px;
    background: gray;
}
于 2013-07-01T09:33:02.453 回答
0

将中间的一个放在一个 div 中，并在其中制作三个 div，并给它们高度 100%

于 2013-07-01T10:06:55.173 回答
0

使用min-height. 下面提供了此属性的示例。

MDN

MSDN

于 2013-07-01T09:35:29.747 回答