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

debugcn 发表于 Dev

用户4015351

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

这是我制作的示例图像：

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

怎么办？

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

皮特

你的基本布局可以用 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。