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

我很难使我的列具有相同的高度。我只想使列具有相同的高度。这是我的代码：

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 s的每个ID都动态生成内容，因此每列的高度将基于这些Div中的内容。有什么方法可以将列设置为比另一列更长的高度？还是有办法将列高度设置为固定的东西？我试图为id S中的每个S添加height: 1000px，但似乎不适用于CSS。任何帮助将不胜感激。

有两个大选项：使用JavaScript或不使用JavaScript。

如果您使用JavaScript，则假设您使用一个库来帮助您的代码的某些部分成为跨浏览器，而无需大量工作，那么它是几乎保证可以在任何浏览器上使用该浏览器支持它。

大跌回：如果某人禁用了JavaScript，则看起来不好。

不是JavaScript

最近CSS获得了一种新的显示类型flex。现在，应该说，根据我可以使用的是，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>

通过CSS，包括IE8（例如IE8）的旧浏览器，您有显示：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是一种非常扎实的技术，因为您的列具有固定宽度

如果要将每列的高度限制为限制。您可以使用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";
}

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

.parent{
    display: flex;
}

您可以使用此代码获得帮助。您需要使用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的后备。

尝试一下（我添加了一些背景色只是为了查看结果）

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>

无需为此使用JavaScript。只需利用标准table在CSS中显示。

小提琴

不是JavaScript

相关内容

最新更新

热门标签：