Question

简而言之，我有一个带有可折叠导航栏和在导航栏下方的嵌套div的侧栏。

我想要嵌套的div（设置为分别具有可滚动的内容）可以随时填充可用空间，但我不希望它溢出到网页的其他区域。

.scroll{
  max-height: 100%;
  overflow-y: scroll;
}

最大高度
最低身高
一般来说，身高已被尝试杀死。

    <div class="col-sm-3">
    <nav class="navbar navbar-inverse">
    <div class="container-fluid" style="padding-right:0px;">
    <div class="navbar-header" style="width:100%; float:none; padding-left:15px;">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>       
    </button>    
    <a class="navbar-brand" href="#">Related topics</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar" style="border:0px;">
    <ul class="nav navbar-nav" style="width:100%;">
    <li></li>
    <li class="dropdown" style="float:none;">
    <a class="dropdown-toggle" style="float:none;" data-toggle="dropdown" href="#">Links <span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li></li>
    <li><></li>
     </ul>
    </li>
    <li ></li>
    </ul>
    </div>
    </div>
    </nav>
    <div class="scroll">
    <Content>
    </div>

主要div内容流血并压低其他内容，或者嵌套的div不会重新调整大小，而是位于较低的内容后面。

Example

Answer 1

自己修复。子div元素周围的Flex容器。将flex控件设置为column，并在完全展开时为顶部子项指定最小高度。

结果：两个子div都具有完全响应能力，并且会根据彼此的需要而缩小或成长以填充父级。

<div class="col-sm-3 flex-container">

<ul class="nav navbar-nav" style="width:100%; height:325px">

.flex-container {
display: flex;
flex-direction: column;
width: 260px;
padding-right: 0px;
height: 400px;
align-items: stretch;
}

Div不会调整大小以适应父级

1 个答案: