logo标签列表

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

javascripthtmlcss
3

我希望你能帮我翻译一下。这是有关编程的内容，需要让它更加易于理解。请注意，保留HTML标记，不要添加解释。以下是需要翻译的内容：

我无法使我的列高度相同。我只想让列高度相同。以下是我的代码：

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%;
}

我遇到的问题是，由于每个
的id都会动态生成内容，每列的高度将基于这些
中的内容。是否有办法将列设置为比另一列更长的高度？或者是否有一种方法可以将列高度设置为固定值？我尝试为每个添加height: 1000px，但似乎CSS甚至都没有应用。任何帮助都将不胜感激。
3
为什么不使用flexbox代替浮动（float）呢？https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - SKeurentjes
1
对于Flexbox来说加一很简单，但是在CSS中等高列曾经被认为是圣杯！ - Jaromanda X
你可以使用表格代替div。 - Santosh Khalse
你能分享一下你网站的任何可用示例吗？ - Santosh Khalse
7个回答
1

有两个选择：使用Javascript或不使用Javascript。

如果您使用Javascript，假设您使用了一个库，该库可以帮助您的代码的某些部分在没有太多工作的情况下成为跨浏览器的，那么它几乎肯定会在任何支持它的浏览器上运行。

大降级：如果有人禁用了Javascript，那看起来效果不好。

非Javascript

最近CSS获得了一种新的显示类型flex。现在，应该指出的是，基于Can I Use，IE 11对flexbox的支持已经混乱了，但大多数浏览器都支持它（85％的浏览器支持它而无需前缀，这包括大多数移动浏览器！）

.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;
}
<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>

1

通过CSS并包含旧的浏览器，如IE8，您可以使用display:table/table-cell。

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%;
}
<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>

为了支持非常老的浏览器，您可能还需要使用http://alistapart.com/article/fauxcolumns这种非常可靠的技术，因为您的列具有固定的宽度。
0

这并不需要使用JavaScript。 只需在CSS中利用标准的table显示即可。

FIDDLE

0

试一下这个（我添加了一些背景颜色来查看结果）

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;
}
<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>

0

你可以使用这段代码来获取帮助。 你需要使用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的回退。

请在您发布的链接中包含要点，因为链接可能会在一段时间后失效... - Technotronic
0
如果您想将每个列的高度限制在一定范围内，可以使用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";
}
0

你可以尝试并检查我的代码，我使用了display flex来完成你想要的操作...请查看此链接https://jsfiddle.net/qpfrtqh2/1/

.parent{
    display: flex;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接