Html 如何解决网页背景未覆盖整个页面的问题？_Html_Css_Angular

Html 如何解决网页背景未覆盖整个页面的问题？

html css angular

Html 如何解决网页背景未覆盖整个页面的问题？,html,css,angular,Html,Css,Angular,我是webdev的新手，我的网页在Angular中遇到了问题我试图改变我的网页背景颜色，新的颜色只出现在少数地方。我知道这是我的CSS和我的页面如何组织的问题。如何解决此问题，使背景色显示在没有对象的任何位置？我的网页在不应该的时候也可以滚动。这似乎也是我的CSS的格式问题任何帮助都将不胜感激以下是该问题的情况：这是我的HTML： <html> <mat-sidenav-container> <mat-sidenav mode="push

我是webdev的新手，我的网页在Angular中遇到了问题

我试图改变我的网页背景颜色，新的颜色只出现在少数地方。我知道这是我的CSS和我的页面如何组织的问题。如何解决此问题，使背景色显示在没有对象的任何位置？我的网页在不应该的时候也可以滚动。这似乎也是我的CSS的格式问题

任何帮助都将不胜感激

以下是该问题的情况：

这是我的HTML：

<html>
<mat-sidenav-container>
    <mat-sidenav mode="push" [(opened)]="opened"> Sidenav</mat-sidenav>
    <mat-sidenav-content>Main
        <button (click)="opened=!opened" >Toggle</button>
    </mat-sidenav-content>
</mat-sidenav-container>
    
    <div class ="header">
        <img src="assets/Logo.png" alt="alternatetext" />
     <h2 >Issuer locations</h2>
     
    </div>
   
    <hr class="new1" >

        <div class ="map" >
        <agm-map 
        
        [latitude]="lat" 
        [longitude]="lng" 
        [zoom]="zoom" >

            <agm-marker *ngFor="let item of items"
            [latitude]= "item.address.latitude"
            [longitude] ="item.address.longitude"
            [label]= "item.address.city"
            (mouseOver)="onMouseOver(infowindow)"
            (mouseOut)="onMouseOut()"
            >

            <agm-info-window #infowindow> <strong>{{item.issuerName}}</strong>   </agm-info-window>
            </agm-marker>
        </agm-map>
        </div>
            <div>
                <label>Company Name </label>
                <input type="text" [(ngModel)]="Pdata.name"> 
                <label>Control Number </label>
                <input type="text" [(ngModel)]="Pdata.cNum"> 
                <label>Country</label>
            <select [(ngModel)]="Pdata.countryId" name="Country" id= "selection" class="form-control">
                <option *ngFor="let x of countries[0]" [value]= "x.id" >{{x.description}}</option>
            </select>
                <button (click)="getResults()">Search</button>
                
            </div>

            <div>
                <table class="table table-trapped">
                    <thead>
                        <tr>
                            <th>Issuer Name</th>
                            <th>Status</th>
                            <th>Merchant Approval</th>    
                        </tr>
                    </thead>
                <tbody>
                    <tr *ngFor="let data of searchResult">
                    
                    <button (click)="recordData(data.partyId)" class="btn partyName"><td>{{data.partyName}}</td></button>

                        <td>{{data.issuerStatusDescription}}</td>
                        <td>{{data.isMerchantApprovalRequired}}</td>
                        
                    </tr>
                </tbody>
                </table>
                </div>
                
               

            <div class="footer" id="footer">
                <p class="info">Version: v.1 </p>  <p class="copyright">Copyright © {{curYear}}. All Rights
                    Reserved.</p>       
                  
             </div>
           

</html>

<router-outlet></router-outlet>

如果

元素未扩展到窗口底部，则可能会出现问题（因为绝对定位/浮动等不会占用DOM中的物理空间）。您可以尝试将

minheight:100vh

添加到

html{}

规则中，看看这是否可以解决问题。

agm-map {
  
  height:500px;
  overflow: visible;
}
.header img {
  float: left;
 
  background: #555;
}

.header h1 {
  position: absolute;
  top: 18px;
  left: 10px; 
  
}
h2 {
  color: black; 
text-align: center;
    font-family: Arial, Helvetica, sans-serif;

}table {
  border-collapse: collapse;
  width: 100%;
   z-index: 0;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
  background-color: #981e1e;
  color: white;
}

  
  /* Red border */
hr.new1 {
  border-top: 3px solid #981e1e;
}
  html {height: 100%;} 

  .btn {
    background: none!important;
    border: none;
    padding: 0!important;
    /*optional*/
    font-family: arial, sans-serif;
    /*input has OS specific font-family*/
    color: #069;
    text-decoration: underline;
    cursor: pointer;
  }
  .footer {
    
    position: absolute;
    bottom: 0;
    height: 41px;
    width: 100% !important;
    overflow: auto !important;
    background-repeat: repeat !important;
    background-image:   url('src\assets\footerBgdTile.png');
    
    
  }
 p.info{
   color: white;
   float: left;

  }
  p.copyright {
    float: right;
    color:white;

  }
  mat-sidenav-container {
    height: 100%; 
    position: absolute;
    width:  100px;
    background: #eee;
  }

  mat-sidenav, mat-sidenav-content{
    padding: 16x; 
   
  }

  mat-sidenav{
    background-color: lightcoral;
    width: 500px; 
  }

  html {
    background-color: rgb(19, 192, 13);
  }