全寬度和高度空狀態？

試圖將空狀態置於app-header以下。我希望它佔據整個屏幕的全寬和全高（減去app-header的高度）。全寬度和高度空狀態？

到目前爲止，我有這個，但它似乎並沒有工作：

<app-header-layout> 
    <app-header> 
     ..... 
    </app-header> 
    <div id="empty-state" style="width: 100%; height: 100%; background: #F00; white-space: nowrap;"> 
     ..... 
    </div> 
</app-header-layout>

仍然沒有去。空狀態具有我想要的全部寬度，但不是我想要的高度。

請幫我一把。

來源

2017-01-05 Jeffrey Lopez

參見[這個問題]（http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining -screen空間） – chester

有一些方法可以做到這一點。您可以使用flex-box（解釋here）：

body, 
 
html { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
app-header { 
 
    min-height: 50px; 
 
} 
 
#empty-state { 
 
    overflow: auto; 
 
    background: #F00; 
 
    flex-grow: 1; 
 
    overflow: auto; 
 
}

<body> 
 
    <app-header>...</app-header> 
 
    <div id="empty-state"> 
 
    ..... 
 
    </div> 
 
</body>

你也可以簡單地進行絕對定位的元素。簡單地說明app-header的高度和偏移＃空狀態的高度。就像這樣：

body, 
 
html { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
app-header { 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 
#empty-state { 
 
    position: absolute; 
 
    top: 50px; 
 
    bottom: 0; 
 
    background: #F00; 
 
    width: 100%; 
 
}

<app-header-layout> 
 
    <app-header> 
 
    ..... 
 
    </app-header> 
 
    <div id="empty-state"> 
 
    ..... 
 
    </div> 
 
</app-header-layout>

來源

2017-01-05 02:31:33 galit90

全寬度和高度空狀態？

回答

相關問題