Question

我无法让我的名单达到全高。嵌套组件的代码更复杂。但我仍然可以使用此代码进行复制。这是一个插件。 mask

styles.css的

.container {
height: 100%;
background: black;
color: white;

app.component.css

.row {
  display: flex;
  flex-direction: row;
}
.list {
  width: 33%;
  height: 100%;
  flex-direction: column;
  display: flex;
  border-right: groove white 1px;
  border-top: groove white 1px;
}
.item {
  width: auto;
  height: 100%;
  flex-direction: column;
  display: flex;
}

list.component.css

<div class="contents">
  <button (click)="updateDocuments()">Update Document</button>
  <div class="row">
    <div class="list">
      <div *ngFor="let document of documents; let i = index;">
        {{i + 1}}. {{document}}
      </div>
    </div>
    <div class="item">
      this is an item
    </div>
  </div>
</div>

list.component.html

class colorChangerViewClass: UIView {

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        setColor(color: .blue)
        print("touchesBegan")
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        setColor(color: .green)
        print("touchesEnded")
    }


    func setColor(color: UIColor) {
    self.backgroundColor = color
    }
}

Answer 1

我通过切换到高度100vh并将overflow-y：scroll css属性添加到列表和项类来实现此功能。

http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW

styles.css的

html, body {
  min-height: 100vh;
  height: auto;
  margin: 0;
}

app.component.css

.container {
height: 100vh;
background: black;
color: white;

list.component.css

.row {
  display: flex;
  flex-direction: row;
}
.list {
  width: 33%;
  height: 100vh;
  flex-direction: column;
  display: flex;
  border-right: groove white 1px;
  border-top: groove white 1px;
  overflow-y: scroll;
}
.item {
  width: auto;
  height: 100vh;
  flex-direction: column;
  display: flex;
  overflow-y: scroll;
}

list.component.html

<div class="contents">
  <button (click)="updateDocuments()">Update Document</button>
  <div class="row">
    <div class="list">
      <div *ngFor="let document of documents; let i = index;">
        {{i + 1}}. {{document}}
      </div>
    </div>
    <div class="item">
      this is an item
    </div>
  </div>
</div>

Answer 2

尝试写这个css

Select * 
from Sometable 
where somecolumn like '%�%'

Answer 3

遇到相同的问题，发现最好的解决方案是：

html, body {
  min-height:100vh;
  height: auto;
}

以及容器：

.container{
  min-height: 100vh;
}

Answer 4

大家遇到这个问题的人只需转到全局css文件，它就会有注释

/* You can add global styles to this file, and also import other style files */

写在里面。添加

*{margin:0; padding:0}

就这样

Answer 5

如果可以接受，请使用position: fixed：

.container {
  position:fixed;
  background: black;
  color: white;
  height: 100%;
}

Answer 6

尝试使用style.css

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

Answer 7

互联网上的某个地方：

<块引用>

这个问题的原因隐藏在浏览器解释的方式中宿主元素，它根本不知道它是一个 HTML 元素，并且所以浏览器为主机设置默认显示值（内联）元素。

所以可能只需重新定义“host”标签的“display”属性（添加到您的组件代码中）：

host: {
  display: flex; /*or whatever is fit your needs*/
}

设置角度组件的完整高度

7 个答案: