Question

我正在尝试创建一个顶部带有标题的布局，在其下方是侧边栏和主要内容。

我希望侧边栏和内容视图接管标题留下的垂直空间。问题是标题可以动态重新调整大小，因此我无法执行calc()。我的解决方案是使用flexbox方案。

我将视口水平分为两部分。一个是标题，一个是侧边栏和主要内容的包装。

侧边栏向左浮动并给出宽度的一定百分比，内容会向右浮动，剩下的就是。

问题是我试图让侧边栏总是100％高度的包装。

我尝试了height: 100%和min-height: 100%，但这些都不起作用。

我不希望绝对定位它，因为如果包装器溢出主要内容，侧边栏就不会相应地扩展。

这是我的笔：http://codepen.io/markt5000/pen/JXNXpW

正如您所见，橙色是标题，红色空间是侧边栏和内容的包装。

这是布局

<div class="header">
</div>

<div class="row">

  <div id="sidebar">
  </div>

 <div id="main-content">
 </div>

</div>

Answer 1

没有必要：

height，min-height或calc
绝对定位
浮动（实际上，它们是无用的，因为floats are ignored in a flex formatting context）

Flex属性具有使布局工作所需的全部功能。关键是使用flex: 1使项目扩展容器的完整可用长度。

因此，您的标题高度可以是动态的，侧边栏和主要内容可以消耗任何高度。没有滚动条。

这里的代码包含一些修订：

＆＃13;

html { height: 100%; }

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.outer-flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;  /* main flex container stacks items vertically */
}

.header {
  height: 80px;            /* demo purposes; from your original code */
  background-color: orange;
}

.nested-flex-container {
  display: flex;           /* inner flex container stacks items horizontally */
  flex: 1;                 /* KEY RULE: tells this second flex item of main container
                                  to consume all available height */
  align-items: stretch;    /* KEY RULE: default setting. No need to include. Tells
                                  children to stretch the full length of the container
                                  along the cross-axis (vertically, in this case). */
}

.sidebar {
  flex-basis: 20%;        /* set width to 20% */
  background-color: aqua;
}

.content {
  flex: 1;                /* set width to whatever space remains */
  background: magenta;
}

＆＃13;

<div class="outer-flex-container">

     <div class="header">HEADER</div><!-- main flex item #1 -->

     <div class="nested-flex-container"><!-- main flex item #2 -->
    
          <div class="sidebar">SIDEBAR</div><!-- inner flex item #1 -->
    
          <div class="content">MAIN CONTENT</div><!-- inner flex item #2 -->
    
     </div><!-- close inner flex container -->

</div><!-- close outer flex container -->

＆＃13;

Revised Codepn

Answer 2

这是你想要的吗？ http://codepen.io/Shambolaz/pen/xVdVyd

.view .row
{
  flex: 1 1 auto;
  background:red;
  height: 90%;
}

Answer 3

当内容大于其元素时，要获得真正的“固定位置”行为，请在内容元素中添加overflow: auto。

还要确保为内容元素的所有父元素具体指定高度。

我的意思是必须有一个具有指定高度（固定px或100vh）的祖先元素。

堆栈溢出会将代码段放入具有固定高度父级的iFrame中，因此使用height: 100%的元素可以进行计算。

因此，我们只需将height: 100%添加到内容div中，滚动条就会显示在其中。

这是经过修改的pen（也具有固定的高度祖先）。您可以通过在各个点删除height CSS规则来进行试验，并查看滚动条在元素树上的移动。

html { height: 100%; }
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.outer-flex-container {
  display: flex;
  flex-direction: column;  
  height: 100%;
}

.header {
  height: 80px;            
  background-color: orange;
}

.nested-flex-container {
  display: flex;          
  flex: 1;
}

.sidebar {
  flex-basis: 20%;       
  background-color: aqua;
}

.content {
  flex: 1;                
  background: magenta;
  overflow-y: auto;     
  height: 100%;
}

<div class="outer-flex-container">

     <div class="header">HEADER</div><!-- main flex item #1 -->

     <div class="nested-flex-container"><!-- main flex item #2 -->
    
          <div class="sidebar">SIDEBAR</div><!-- inner flex item #1 -->
    
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Porttitor eget dolor morbi non arcu risus quis varius quam. Commodo viverra maecenas accumsan lacus. Vitae elementum curabitur vitae nunc sed velit dignissim. Auctor urna nunc id cursus metus aliquam eleifend. Bibendum ut tristique et egestas. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Diam maecenas ultricies mi eget mauris pharetra et. Ultricies mi eget mauris pharetra. Nibh mauris cursus mattis molestie.
            <br/>
            Urna neque viverra justo nec ultrices dui sapien. Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Nunc non blandit massa enim nec dui nunc. Amet mattis vulputate enim nulla. Nisl condimentum id venenatis a condimentum vitae sapien. Magna sit amet purus gravida quis blandit turpis. Sed turpis tincidunt id aliquet risus. Aliquet lectus proin nibh nisl condimentum id venenatis a. Vitae purus faucibus ornare suspendisse sed. Sit amet commodo nulla facilisi nullam. Egestas fringilla phasellus faucibus scelerisque eleifend. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Viverra adipiscing at in tellus integer feugiat. Scelerisque eu ultrices vitae auctor eu augue. At urna condimentum mattis pellentesque.
            <br/>
            Quisque id diam vel quam elementum pulvinar etiam non quam. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. Diam quis enim lobortis scelerisque fermentum dui. Tortor id aliquet lectus proin nibh. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus. Egestas fringilla phasellus faucibus scelerisque. Venenatis a condimentum vitae sapien pellentesque habitant. Quis vel eros donec ac odio tempor orci. Ultrices sagittis orci a scelerisque. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Dis parturient montes nascetur ridiculus mus mauris. Nisl vel pretium lectus quam id leo in vitae. Euismod elementum nisi quis eleifend quam adipiscing vitae. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Urna porttitor rhoncus dolor purus non. Lobortis mattis aliquam faucibus purus in massa tempor nec. Risus pretium quam vulputate dignissim suspendisse in. Malesuada bibendum arcu vitae elementum curabitur. Quisque id diam vel quam elementum pulvinar. A erat nam at lectus urna duis convallis.
            <br/>
            Nulla facilisi nullam vehicula ipsum. Nibh ipsum consequat nisl vel pretium lectus quam id leo. Morbi tristique senectus et netus et malesuada fames ac turpis. Quis imperdiet massa tincidunt nunc pulvinar sapien. Amet volutpat consequat mauris nunc congue nisi vitae. Feugiat sed lectus vestibulum mattis ullamcorper. Pharetra magna ac placerat vestibulum lectus. Sed faucibus turpis in eu mi bibendum neque egestas. A condimentum vitae sapien pellentesque habitant. Mi bibendum neque egestas congue quisque egestas diam. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Lacus luctus accumsan tortor posuere ac ut.
            <br/>
            Sit amet cursus sit amet dictum. Sem integer vitae justo eget magna fermentum iaculis eu non. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Facilisis gravida neque convallis a cras semper. Nullam vehicula ipsum a arcu. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Et odio pellentesque diam volutpat commodo sed egestas egestas. Velit aliquet sagittis id consectetur. Faucibus vitae aliquet nec ullamcorper. In iaculis nunc sed augue lacus viverra. Vitae semper quis lectus nulla at volutpat diam ut venenatis. Et malesuada fames ac turpis. Felis imperdiet proin fermentum leo vel. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Quis varius quam quisque id diam vel quam. Ornare arcu dui vivamus arcu felis bibendum ut. Turpis massa sed elementum tempus egestas sed. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Arcu ac tortor dignissim convallis aenean et tortor.
          </div><!-- inner flex item #2 -->
    
     </div><!-- close inner flex container -->

</div><!-- close outer flex container -->

使第二行的弹性物品占据容器的剩余高度

3 个答案: