代码之家 › 专栏 › 技术社区 › rgoncalv

如何使DIV具有100%的父级高度,独立于子级大小?复杂布局

display bootstrap-4 twitter-bootstrap css html

rgoncalv · 技术社区 · 8 年前

此处由 d>表示的左侧是完美的。里面有很多内容,它会按应该的方式滚动。即使当内容增加时,高度仍保持网页高度的100%,而滚动增加。

问题是,我将在可滚动的同时,不依赖于其内部的 c s来填充所有剩余空间。这意味着,使用1 c,它的高度应为页面高度的一半(如图中所示),通过使用20 c s,它应占据相同的高度(同时可滚动,这样用户可以通过滚动到 c e>a )。


   
    <div class=“right bg”>
<DIV class=“col”>
</DIV>
<DIV class=“container rounded card”><!--这是C-->
</DIV>
</DIV>
<p class=“Form Field”>位置</p>
</DIV>
</DIV>




高度:100%;

垫底:10px;

}

利润率:5倍;
溢出:滚动;

D

BA是rowcol

问题是我会的C在里面。这意味着1CA

height=350px但这远不是理想的,因为台式机的高度各不相同。另一方面,如果我不设定高度,的高度成为将所有元素包装在其中所必需的高度,因此使用4s右bg布局已经超过了网页的左侧部分,导致整体布局出现中断。

<div class="right-bg">
<div class="container col" style="height:100%">
  <div class="row"> <!-- THIS IS B -->
    <div class="col"> 
      <div class="row" id="chart-div">
        <canvas id="myChart"></canvas>
      </div>
      <div class="row horizontal-menu-wrapper">      
      </div>
    </div>
  </div>
  <div class="container row ranking-container"> <!-- THIS IS A -->
    <div class="container rounded-card"> <!-- THIS IS C -->
      <div class="row">
        <div class="col-lg-1 col-md-1 col-sm-1">
          <div id="ranking-trophy-header" class="row card-header">
            <i title="General" class="fas fa-trophy header-icon"></i>
          </div>
        </div>
        <div class="col-lg-11 col-md-11 col-sm-11">
          <div class="row row-card">
            <div class="col-lg-5 col-md-5 col-sm-5">
              <p class="ranking-percentage-value"> Top 1%</p>
            </div>
            <div class="col ranking-field">
              <p class="form-field">Position</p>
              <p class="form-ranking-value"><span class="absolute-ranking">#<span class="absolute-ranking-value">83</span></span></p>
            </div>
            <div class="col ranking-field">
              <p class="form-field">Pool</p>
              <p class="form-pool-value">9470</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>






html {
  height: 100%;
}

body {
  height: 100%;
}

.left-bg {
  flex-flow: column;
  display: flex;
  width: 54%;
  height: 100%;
  overflow: scroll;
  padding-bottom: 10px;
}

.right-bg {
  flex-flow: column;
  display: flex;
  width: 46%;
  height: 100%;
  padding-top: 12px;
}

.ranking-container {
  vertical-align: center;
  margin: 5px;
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 15px;
  overflow: scroll;
  border-radius: 10px;
  margin-bottom: -9999px;
  padding-bottom: 9999px;
}

3 回复 | 直到 8 年前

mahan 8 年前

使用 d-flex flex-column h-100 flex-grow-1

html,
body {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container d-flex flex-column h-100 bg-light">
  <div class="row">
    <div class="col p-5 bg-danger"></div>
  </div>
  <div class="row bg-info flex-grow-1">
    <div class="col"></div>
  </div>
</div>

row

https://codepen.io/anon/pen/RJVaKw

bootstrap-4.1 弹性增长-1

你的大部分风格是不必要的。您可以使用纯引导类来实现这一点。

行。并设置其 overflow-y scroll .你也可以隐藏滚动条。

html,
body {
  height: 100%;
}

.overflow-y-scroll {
  overflow-y: scroll;
}


/*hide scrollbar in webkit-browsers */

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #FF0000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container d-flex flex-column h-100 bg-light">
  <div class="row">
    <div class="col p-5 bg-danger"></div>
  </div>
  <div class="row bg-info flex-grow-1">
    <div class="col flex-grow-1 bg-primary overflow-y-scroll">
      <!-- content -->
    </div>
  </div>
</div>

https://codepen.io/anon/pen/jKmYdq

Rogerio Soares Ferreira 8 年前

<div class="container col" style="position: absolute; top: 0px; bottom: 0px; ">
</div>

Rounin 8 年前

您可以给任何块级元素一个显式的 height

overflow: auto;

它将向该元素添加滚动条元素的内容高于元素自己明确声明的高度。

CSS网格

D 因为这些元素中的内容比父元素本身的高度高。

main {
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 50% 50%;
width: 80vw;
height: 80vh;
border: 6px solid rgb(191, 191, 191);
border-radius: 15px;
}

.a-area {
background-color: rgb(255, 63, 63);
}

.b-area {
background-color: rgb(255, 127, 0);
}

.c-area {
border: none;
background-color: rgb(63, 63, 63);
}

.d-area {
grid-area: 1 / 1 / 3 / 2;
color: rgb(127, 127, 127);
}

main div {
color: rgb(255, 255, 255);
border: 4px solid rgb(191, 191, 191);
overflow-x: hidden;
overflow-y: auto;
}

main div h2 {
margin: 0;
padding-right: 6px;
font-size: 24px;
line-height: 36px;
text-align: right;
}

main div p,
.c-area {
margin: 6px 12px;
}

<main>
<div class="d-area">
<h2>D</h2>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>

<div class="b-area">
<h2>B</h2>
</div>

<div class="a-area">
<h2>A</h2>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

</div>
</main>