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

Question

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

这是我做过的一个例子的图像：

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

怎么办？

这里是我尝试用位置相对和绝对做的最后一个例子（原始代码在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>

Answer 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>