Question

我在div内有一个table，由于它的大小，需要溢出多个td。这在PC上运行良好，但在移动设备上我遇到了一些溢出页面外的问题。查看屏幕截图：

代码：

＆＃13;

    body {
    font-family: Verdana, sans-serif;
    height: 100%;
}

.kalender {height: 60vh;}

table, td, th {
    text-align: left;
    border: 1px solid black;
    vertical-align: text-top;
    padding: 5px;
    font-size: 13px;
}

table {
    height: 100%;
    width: 100%;
}

th {
    height: 6%;
    background-color: #e7e7e7;
}

td {
    width: 14.28%;
    height: 15.6%;
    position: relative;
}

.outer {
        position: absolute;
        font-size: 10px;
        }

    .details {
        display: none;
        background-color: gray;
        overflow: visible;
        border: 2px solid black;
        float: left;
        position: relative;
        z-index: 10;
        padding: 5px;
        font-size: 12px;
    } 

.kortNavn {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    text-align: center;
}

.skoleFri {
    border-radius: 50%;
	width: 8px;
	height: 8px; 
    background-color:red;
    display: inline-block;
}

.sfoFri {
    border-radius: 50%;
	width: 8px;
	height: 8px; 
    background-color:blue;
    display: inline-block;
}

    div:hover > .details {display: block;}

＆＃13;

<div class="kalender">
  <table *ngIf="datoer">
      <tr>
          <th>Man</th>
          <th>Tir</th>
          <th>Ons</th>
          <th>Tor</th>
          <th>Fre</th>
          <th>Lør</th>
          <th>Søn</th>
      </tr>
      <tr>
            <td *ngFor="let cell of ukeEn()">
                {{cell.text}}
                <div class="outer" *ngIf="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngFor="let kort of datoerContains(cell).kortSkolenavn">
                        {{kort}}

                        <div class="skoleFri"></div>
                        <div class="sfoFri" *ngIf="datoerContains(cell).sfoFri == true" ></div>

                    </div>

                    <div class="details" *ngFor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        {{skole.skole}} <br>
                        {{skole.kommentar}} <br>
                        SFO: {{skole.sfodag}}
                    </div>

                </div>
            </td>            
      </tr>
  </table>

＆＃13;

溢出的div是details类。此div必须位于td内，因为您可以看到，它取决于cell中*ngFor的{{1}}，当它在td中调用datoerContains(cell)时。

所以我需要找到一种方法让它留在页面内。想法？

Answer 1

溢出溢出的代码：可见; 你必须设置溢出：隐藏;

Answer 2

除了显示与桌面上的位置相关的详细信息外，您还可以将它们显示在某个不变的位置 - 您知道显示屏上没有任何问题。或者至少在手机上！

Answer 3

你可能需要几个不同的外部类，声明正确：当它靠近屏幕的右侧（向左打开）时为0，在底部附近时为100％。另外，不知道它是否是错误的，但你在外面前面缺少点。如果你能显示真正的代码以获得进一步的帮助，那就太好了

Answer 4

看看这个。我相信你可以从那开始

＆＃13;

body {
    font-family: Verdana, sans-serif;
    height: 100%;
}

.kalender {height: 60vh;}

table, td, th {
    text-align: left;
    border: 1px solid black;
    vertical-align: text-top;
    padding: 5px;
    font-size: 13px;
}

table {
    height: 100%;
    width: 100%;
}

th {
    height: 6%;
    background-color: #e7e7e7;
}

td {
    width: 14.28%;
    height: 15.6%;
    position: relative;
}

.outer {
    position: absolute;
    font-size: 10px;
    top: 0px;
    left: 0px;
    
}

table {
    table-layout: fixed;
}
   .details {
    background-color: gray;
     display: none;
    
    border: 2px solid black;
    position: relative;
    z-index: 10;
    padding: 5px;
    font-size: 12px;
  
}
.rdet{right: 0; left: auto;position: absolute;}
.rbot{position: absolute; bottom: 0px; top: auto; }
.kortNavn {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    text-align: center;
}

.skoleFri {
    border-radius: 50%;
	width: 8px;
	height: 8px; 
    background-color:red;
    display: inline-block;
}

.sfoFri {
    border-radius: 50%;
	width: 8px;
	height: 8px; 
    background-color:blue;
    display: inline-block;
}

    .outer:hover > .details {display: block;}

＆＃13;

<div class="kalender">
  <table *ngif="datoer">
      <tbody><tr>
          <th>Man</th>
          <th>Tir</th>
          <th>Ons</th>
          <th>Tor</th>
          <th>Fre</th>
          <th>Lør</th>
          <th>Søn</th>
      </tr>
      <tr>
            




  
  
  
  
  
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td>
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td>
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td>
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td>
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td><td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td><td *ngfor="let cell of ukeEn()">
7                <div class="rout outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="rdet details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td>


            
      </tr>
             <tr>
            




  
  
  
  
  
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td>
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td>
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td>
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td>
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td><td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td><td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="rdet details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td>


            
      </tr>
             <tr>
            




  
  
  
  
  
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="rbot details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td>
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="rbot details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td>
               
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="rbot details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

  
                </div>
            </td>
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="rbot details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
  
            </td>
<td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="rbot details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>
  

                </div>
            </td><td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="rbot details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td><td *ngfor="let cell of ukeEn()">
7                <div class="outer" *ngif="datoerContains(cell).fulltSkolenavn != null">

                    <div class="kortNavn" *ngfor="let kort of datoerContains(cell).kortSkolenavn"><div class="skoleFri"></div>
                        <div class="sfoFri" *ngif="datoerContains(cell).sfoFri == true"></div>

                    </div>

                    <div class="rdet rbot details" *ngfor="let skole of datoerContains(cell).fulltSkolenavn"> 
                        skole skole <br>
                        skole kommentar <br>
                        SFO: skole sfodag
                    </div>

                </div>
            </td>


            
      </tr>
  </tbody></table>
</div>

＆＃13;

div在页面外溢出

4 个答案: