CSS | Bootstrap - 具有基于动态高度的内容的侧边栏块答案

【问题标题】：CSS | Bootstrap - Sidebar's blocks with dynamic height based contentCSS | Bootstrap - 具有基于动态高度的内容的侧边栏块
【发布时间】：2018-07-30 17:09:14
【问题描述】：

我正在尝试设置必须用侧边栏主块拉伸/填充的侧边栏块的高度。我的侧边栏块也必须与内容块的高度相同。

这是我制作的示例图片：

我正在使用 bootstrap 4，并且我尝试过使用网格/flexbox 和位置相对/绝对（侧边栏位置绝对和容器位置相对），但是当我尝试在块上设置百分比高度时，他们不尊重这一点。

怎么做？

这是我尝试使用相对位置和绝对位置所做的最后一个示例（原始代码在 php 中）

<div class="row position-relative">
       <div class="col-md-3 p-0"></div>
       <div class="col-md-3 p-0 position-absolute h-100">
           <div class="d-none d-md-block">
            <div id="boxsubmenu">
              <div class="level_0">

BLOCK 1 <-----
                  <a href="{CATALOG_LINK}" class="level_0">{TPL_LAN.LBL_CAT_MENU_TITLE}{MENU4.LABEL}</a>
                  <div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                  </div>
BLOCK 2 <-----
                  <a href="{CATALOG_LINK}" class="level_0">{TPL_LAN.LBL_CAT_MENU_TITLE}{MENU4.LABEL}</a>
                  <div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                  </div>

BLOCK 3 <-----
                  <a href="{CATALOG_LINK}" class="level_0">{TPL_LAN.LBL_CAT_MENU_TITLE}{MENU4.LABEL}</a>
                  <div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                    <div class="level_{MENU.LEVEL} {MENU.SELECTED} {MENU.LAST}">
                      <a href="{MENU.LINK}" class="{MENU.SELECTED}">{MENU.LABEL}</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
       </div>
       <div class="col-md-9">
           <div class="row">
               <div class="col-xs-12 p-5 col-md-9" style="width: 100% !important;">
                   {PAGE_CONTENT}
               </div>
           </div>
       </div>
   </div>

【问题讨论】：

请在您的问题中发布您当前的代码。
@WebDevBooster 代码在多个 php/css 文件中，在我看来太大而无法发布，但我可以尝试插入提取等待
在这种情况下，您应该在做任何事情之前阅读以下页面：minimal reproducible example

标签： css flexbox grid styles bootstrap-4

【解决方案1】：

你的基本布局可以用 flexbox 来实现：

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.left-col {
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.box {
  flex-basis: 30%;
}

.right-col {
  width: 70%;
}

.border {
  border: 1px solid red;
  box-sizing: border-box;
}

<div class="left-col border">
  <div class="box border"></div>
  <div class="box border"></div>
  <div class="box border"></div>
</div>

<div class="right-col border"></div>

【讨论】：

这当然是一种方法，是的。然而，这个解决方案忽略了 Bootstrap 已经提供的工具/类来完成这项工作。换句话说，此时使用 Bootstrap 变得毫无意义。
我总是惊讶于这里有多少人非常挑剔但他们自己却不提供任何东西，无论如何，向我们展示它是如何使用引导程序完成的
由于这个答案已经被接受，我认为没有必要再发布一个。但是，嘿，如果他需要响应版本而不添加更多 CSS，OP 总是可以发布另一个问题。 :-)
因为 OP 总是可以改变主意并使用他们的技术寻求更好的答案，所以我已经在几个问题上完成了它，我想到了一种不同的方式来添加到网站- 它还为未来的读者提供了另一种方式
我使用了引导类，但 flex-basis 不在文档中，然后我在 css 文件中手动添加了它。 Ty @Pete 我不知道 flex-basis