Question

我无法使我的列高度相同。我只想使柱子高度相同。这是我的代码：

HTML：

<main>
  <div id="left-column">
    <div id="facets"></div>
  </div>
  <div id="right-column">
    <div id="stats"></div>
    <div id="hits"></div>
    <div id="pagination"></div>
  </div>
</main>

CSS：

#left-column {
  float: left;
  width: 25%;
  background-color: #fff;
  border-right: 1px solid #cdcdcd;
}
#right-column {
  width: 75%;
  margin-left: 25%;
}

我遇到的问题是因为每个div的id都动态生成内容，每列的高度将基于这些div内的内容。有没有办法将列设置为任何比其他列更长的高度？或者有没有办法将列高设置为固定的？我曾尝试为每个height: 1000px添加id，但这似乎不适用于CSS。任何帮助将不胜感激。

Answer 1

有两个很大的选择：使用Javascript，或者不使用Javascript。

如果您使用Javascript，假设您使用的库可以帮助您的代码的某些部分成为跨浏览器，而无需您做很多工作，那么几乎保证可以正常工作在任何支持它的浏览器上。

Big Fall Back：如果某人禁用了Javascript，那么它看起来并不好。

不是Javascript

最近，CSS获得了一种新的显示类型flex。现在，应该说，基于Can I Use，IE 11已经搞砸了对flexbox的支持，但大多数浏览器都支持它（85％支持它没有前缀，而且包括大多数移动浏览器！）

＆＃13;

.flex-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#left-column {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  border-right: 1px solid #CDCDCD;
}
#right-column {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
  padding-left: 5px;
}

＆＃13;

<main class="flex-container">
  <div id="left-column">
    <div id="facets">test</div>
  </div>
  <div id="right-column">
    <div id="stats" test></div>
    <div id="hits">test</div>
    <div id="pagination">test</div>
  </div>
</main>

＆＃13;

Answer 2

通过CSS并包含IE8等旧版浏览器，您可以显示：table / table-cell。

＆＃13;

main {
  display: table;
  table-layout: fixed;
  width: 100%;
}
#left-column {
  display: table-cell;
  width: 25%;
  background-color: #fff;
  border-right:  solid ;
}
#right-column {
  display: table-cell;
  width: 75%;
}

＆＃13;

<main>
  <div id="left-column">
    <div id="facets">facets</div>
  </div>
  <div id="right-column">
    <div id="stats">stats</div>
    <div id="hits">hits</div>
    <div id="pagination">pagination</div>
  </div>
</main>

＆＃13;

要包含非常旧的浏览器，您可能还会看到http://alistapart.com/article/fauxcolumns非常扎实的技术，因为您的列具有固定宽度

Answer 3

您可以使用此代码获得帮助。你需要使用flex css。

<ul class="list">
    <li class="list__item"><!-- content --></li>
    <li class="list__item"><!-- content --></li>
    <!-- other items -->
</ul>

和css如下所示。

.list
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
    .list__item
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

你需要一些javascript代码来回退flex css。

Answer 4

如果要将每列的高度限制为限制。您可以使用max-height和min-height规则。但是如果你想用Javascript来做。以下是假设您在列中填写了内容数据后调用此函数的算法

function setHeight() {
    var leftCol = document.querySelector("#left-column");
    var rightCol = document.querySelector("#right-column");

    var largerHeight = Math.max(leftColHeight.getBoundingClientRect().height, rightColHeight.getBoundingClientRect().height);

    leftCol.style.height = largerHeight + "px";
    rightCol.style.height = largerHeight + "px";
}

Answer 5

您可以尝试检查我的代码我已经使用display flex来做您想做的事情..查看此链接https://jsfiddle.net/qpfrtqh2/1/

        UIGraphicsBeginImageContext(CGSizeMake(_drawingUV.drawingImgView.image.size.width, _drawingUV.drawingImgView.image.size.height));
        {
                CGContextRef context = UIGraphicsGetCurrentContext();

            if ([_drawingUV.drawingImgView respondsToSelector:@selector(drawViewHierarchyInRect:afterScreenUpdates:)])
            {
                [_drawingUV.drawingImgView drawViewHierarchyInRect:_drawingUV.drawingImgView.bounds afterScreenUpdates:YES];
            }
            else
            {
                [_drawingUV.drawingImgView.layer renderInContext:context];
            }
            screenShot = UIGraphicsGetImageFromCurrentImageContext();
        }
        UIGraphicsEndImageContext();

Answer 6

试试这个（我添加了一些背景颜色只是为了看结果）

＆＃13;

main{    overflow: hidden; 
}
#left-column {
  float: left;
  width: 25%;
  background-color: red;
  border-right: 1px solid #cdcdcd;
   margin-bottom: -99999px;
    padding-bottom: 99999px;
}
#right-column {
  background-color: green;
  width: 75%;
  margin-left: 25%;
   margin-bottom: -99999px;
    padding-bottom: 99999px;
}

＆＃13;

<main>
  <div id="left-column">
    <div id="facets">aa</div>
  </div>
  <div id="right-column">
    <div id="stats">bb</div>
    <div id="hits">cc</div>
    <div id="pagination"></div>
  </div>
</main>

＆＃13;

Answer 7

没有必要使用javascript。只需利用CSS中的标准table显示。

FIDDLE

如何动态地使列具有相同的高度？

7 个答案:

不是Javascript