Question

我正在尝试使用flexbox方法创建一个布局，在调整窗口大小时调整页眉宽度和内容尺寸，但保持侧边栏尺寸。

我从这个Flexbox Approach找到了以下示例来启动，它可以根据内容div本身的需要运行。但在查看之后，我不确定如何使其按照固定宽度，100％高度的侧边栏进行操作。

示例中的CSS：

<style>
 html, body { 
   height: 100%; 
   margin: 0 
  } 
 .box { 
   display: flex; 
   flex-flow: column; 
   height: 100%; 
  } 
 .box .row { 
   border: 1px dotted grey; 
  } 
 .box .row.header { 
   flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */ } 
 .box .row.content { 
   flex: 1 1 auto; 
  } 
 .box .row.footer { 
   flex: 0 1 40px; 
  }
  </style>

示例中的HTML：

  <div class="row header"> 
    <p><b>header</b> <br /> <br />(sized to content)</p> 
  </div> <div class="row content">
    <p> <b>content</b> (fills remaining space) </p> 
  </div> 
  <div class="row footer"> 
    <p><b>footer</b> (fixed height)</p> 
  </div> 
</div>

Answer 1

以下的codepen示例为我提供了使布局工作所需的信息：

http://codepen.io/JosephSilber/pen/HqgAz

CSS：

.header {
  height: 50px;
}

.body {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;
}

.sidebar {
  width: 140px;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
  overflow: auto;
}

.box {
  min-height: -webkit-min-content;
  display: flex;
}

.column {
  padding: 20px;
  border-right: 1px solid #999;
}

.column > div {
  height: 2000px;
  background: red;
}

.column:nth-child(2) > div {
   height: auto;
}

/* All of these are just for this demo's design. */

body {
  font-family: sans-serif;
  font-size: 20px;
  line-height: 50px;
  text-transform: uppercase;
  font-weight: bold;
}

.header {
  text-align: center;
  color: #fff;
  background: #444;
}

.sidebar {
  background: #666;
  padding: 4px 20px;
  color: #fff;
}

.page-header {
  padding: 6px 20px;
  background: #004141;
  color: #fff;
  font-size: .8em;
}

.content {
  background: #ddd;
}

HTML：

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

<div class="body">

移动它：<div class="sidebar">Sidebar</div>

    <div class="main">

        <div class="page-header">Page Header. Content columns are below.</div>

        <div class="content">

            <div class="box">
              <div class="column">
                  <div>Column 1</div>
              </div>
              <div class="column">
                  <div>Column 1</div>
              </div>
              <div class="column">
                  <div>Column 1</div>
              </div>
            </div>

        </div>
    </div>

到这里：<div class="sidebar">Sidebar</div>

</div>

要获得右侧边栏，我只需将<div class="sidebar">Sidebar</div>移动到.body类的结束div标记上方。

调整标题大小和内容div维度响应窗口大小更改但保持右侧边栏维度

1 个答案: