Question

我有一个angular2应用程序，左侧边栏和动态主要内容。

HTML：

<body>
<div class="full_height">
  <div class="sidebar">Some content</div>
  <div class="main">Some dynamic content</div>
</div>
</body>

CSS：

body{
  width:          100%;
  height:         100%;
  margin:         0;
}
.full_height{
    display:        flex;
    flex-direction: row;
    align-items:    stretch;
}
.sidebar{
  background: black;
  color: white;
  width: 150px;
  flex: 0 0 auto;
}
.main{
  flex: 1 1 auto;
}

如果主块中没有信息，我需要侧边栏增长到浏览器主体的100％高度。当需要通过AJAX将大量信息加载到主块时，我需要侧边栏和主块具有相同的高度。

如何让第一部分工作？

JSFiddle

Answer 1

我想你只是忘了为HTML元素分配100％的高度。这是你试过的吗？

＆＃13;

html, body{
  width:          100%;
  height:         100%;
  margin:         0;
}
.full_height{
  display:        flex;
  flex-direction: row;
  align-items:    stretch;
  height: 100%;
}
.sidebar{
  background: black;
  color: white;
  width: 150px;
  flex: 0 0 auto;
}
.main{
  flex: 1 1 auto;
}

＆＃13;

<body>
<div class="full_height">
  <div class="sidebar">Some content</div>
  <div class="main">Some dynamic content</div>
</div>
</body>

＆＃13;

Answer 2

如果您想制作完整的height侧栏，则侧边栏将为fixed position，其余内容将为relative position。请查看以下代码段。

＆＃13;

html{
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
*,
*:after,
*:before{
  box-sizing: inherit;
}
body{
  margin: 0;
  padding: 0;
}
.full_height{
  background-color: white;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px){
  .full_height{
    padding-left: 330px;
  }
}
.sidebar{
  background-color: #5c5c5c;
  color: white;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  padding: 20px;
  width: 100%;
}
@media (min-width: 992px){
  .sidebar{
    height: 100%;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: 310px;
    z-index: 1030;
  }
}
.main{
  background-color: #009688;
  color: white;
  font-size: 20px;
  margin-bottom: 30px;
  padding: 20px;
  width: 100%;
}

＆＃13;

<div class="full_height">
  <div class="sidebar">Some content</div>
  <div class="main">Some dynamic content</div>
</div>

＆＃13;

Snippet two 此相对内容

＆＃13;

html{
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
*,
*:after,
*:before{
  box-sizing: inherit;
}
body{
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
.full_height{
  background-color: black;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
@media (min-width: 992px){
  .full_height{
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
    width: 100%;
  }
}
.sidebar{
  background-color: #f5f5f5;
  color: #009688;
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  max-width: 100%;
  padding: 20px;
}
@media (min-width: 992px){
  .sidebar{
    flex-basis: 310px;
    max-width: 310px;
  }
}
.main{
  background-color: white;
  color: black;
  padding: 20px;
  width: 100%;
}
@media (min-width: 992px){
  .main{
    padding-left: 40px;
  }
}

＆＃13;

<div class="full_height">
  <div class="sidebar">Sidebar content</div>
  <div class="main">Main Content</div>
</div>

＆＃13;

检查全宽视图中的代码段。所有代码段都是响应式的。

Answer 3

如果您希望public class Product{ private Store minStore; private Store maxStore; private List<StorePrice> stores; }和.sidebar都填满整个屏幕，只需添加100vh高度。

.main

如何制作具有动态主要内容的全高边栏？

3 个答案: