html - Position Fixed 和 overflow : auto don't show all content, 还有 IE FIX？

Question

我的 HTML 和 CSS 代码:

    rightframeLogin .username {
    	width: 190px; border: 0px; box-sizing: border-box; padding: 15px; color: #FFF;
    	
    	background: #2c4764;
    
    border-bottom: 2px solid #233950;
    }
    
    #rightframeLogin .password {
    	width: 190px; border: 0px; box-sizing: border-box; padding: 15px; color: #FFF;
    	
    	background: #2c4764;
    
    border-bottom: 2px solid #233950;
    }
    
    #rightframeLogin .submit {
    	width: 190px; border: 0px; box-sizing: border-box; padding: 5px;  color: #FFF;
    	
    	background: #2c4764;
    
    border-bottom: 2px solid #233950;
    transition: all 0.2s ease-in-out;
    }
    
    #rightframeLogin .submit:hover {
    	background-color: #22374E;
    	transition: all 0.2s ease-in-out;
    	
    }
    
    #rightframeLogin {
    		 -moz-box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
       -webkit-box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
       box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
       height: 119px;
       font-weight: bold;
       
       position: fixed;
       right: 0;
       
       z-index: 3;
    }
    
        #rightframe {
        	float: right;
        	color: #FFF;
        	width: 250px;
        	/* box-sizing: border-box;
        	padding: 5px; */
        	color: #ff8a00;
        	min-height: calc(100vh - 35px);
        	margin-top: 35px;
        	 -moz-box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
           -webkit-box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
           box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
           
           position: fixed;
           right: 0;
           z-index: -1;
        
        }
        
        
        #rightframe .left {
        	background-color: #2c4764;
        	width: 60px;
        	box-sizing: border-box;
        	padding: 5px;
        	float: left;
        	min-height: calc(100vh - 35px);
        	height: 100%;
        	color: #16304c;
        }
        
        #rightframe .right {
        
        		float: righT;
        		width: 190px;
        		color: #000;
        		min-height: calc(100vh - 154px);
        		height: 100%;
        		color: #FFF;
        		
        	 -moz-box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
           -webkit-box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
           box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
           
        }
        
        #rightframe .display {
        			background-color: #243a51;
        		box-sizing: border-box;
        		padding: 5px;
        		padding-top: 10px;
        		/* padding-top: 20px; */
        		
        		/* FIXED  asd */
        		
        		
        		position: fixed;
        		right: 0;
        		bottom: 0;
        		top: 155px;
        		overflow: auto;
        		z-index: 5;
        		height: 100%;
        		
        }

    <div id="rightframe">
    
    	<div class="left">
    		
    		<div style="width: 40px; margin: auto;">
    		  <a id='south-east' href='#' title='This is an example of east gravity'><i class="fa fa-camera-retro fa-3x" id="fafa"></i></a>
    		 <a id='south-east1' href='hehe' title='Arkiv'><i class="fa fa-list-ul fa-3x" id="fafa"></i></a>
    		
    	
    		
    		</div>
    		
    	</div>
    	
    	<div class="right">
    
    		
    		<div id="rightframeLogin">
    		
    		<form action="index.php" method="post">
    		<input type="text" name="user" placeholder="Användarnamn" class="username"><br>
    		<input type="password" name="passwd" class="password" placeholder="Lösenord"><br>
    		<input type="submit" name="submit" value="Logga in" class="submit">
    		</form>
    		
    		</div>
    		
    		
    		<div class="right display">
    		
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			
    			inget dudå?
    			
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			too vad gör du? haha hehe :D <br> <br>
    			
    			inget dudå? vaaaaaaad 234234
    			
    			
    			
    		</div>
    		
    	</div>
    
    </div>

该框名为 #rightframe .display ，但无法正常工作。它不显示 div 栏中的所有内容。为什么？还有 IE 的修复程序吗？

如果需要链接来理解代码，请告诉我，以便我链接网页!

Answer 1

问题是您将 .right.display 的高度设置为 100%。这是在两个地方完成的:一次在 .right 的 CSS 规则中，一次在 .display 的规则中。

我从 div 中删除了 .right 类。

我从 .display 的规则中删除了 height:100%; 行。

最后，我在 .display 规则中添加了一个 width:190px;。 (这是通过从元素中删除 .right 类而丢失的。)

您还有一些可以清理的冗余 CSS。

rightframeLogin .username {
    width: 190px; border: 0px; box-sizing: border-box; padding: 15px; color: #FFF;

    background: #2c4764;

border-bottom: 2px solid #233950;
}

#rightframeLogin .password {
    width: 190px; border: 0px; box-sizing: border-box;   padding: 15px; color: #FFF;

    background: #2c4764;

border-bottom: 2px solid #233950;
}

#rightframeLogin .submit {
    width: 190px; border: 0px; box-sizing: border-box; padding: 5px;  color: #FFF;

    background: #2c4764;

border-bottom: 2px solid #233950;
transition: all 0.2s ease-in-out;
}

#rightframeLogin .submit:hover {
    background-color: #22374E;
    transition: all 0.2s ease-in-out;

}

#rightframeLogin {
         -moz-box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
   -webkit-box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
   box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
   height: 119px;
   font-weight: bold;

   position: fixed;
   right: 0;

   z-index: 3;
}

    #rightframe {
        float: right;
        color: #FFF;
        width: 250px;
        /* box-sizing: border-box;
        padding: 5px; */
        color: #ff8a00;
        min-height: calc(100vh - 35px);
        margin-top: 35px;
         -moz-box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
       -webkit-box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
       box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);

       position: fixed;
       right: 0;
       z-index: -1;

    }


    #rightframe .left {
        background-color: #2c4764;
        width: 60px;
        box-sizing: border-box;
        padding: 5px;
        float: left;
        min-height: calc(100vh - 35px);
        height: 100%;
        color: #16304c;
    }

    #rightframe .right {

            float: righT;
            width: 190px;
            color: #000;
            min-height: calc(100vh - 154px);
            height: 100%;
            color: #FFF;

         -moz-box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
       -webkit-box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);
       box-shadow: 2px 3px 6px 0px rgba(0,0,0,0.4);

    }

    #rightframe .display {
                background-color: #243a51;
            box-sizing: border-box;
            padding: 5px;
            padding-top: 10px;
            /* padding-top: 20px; */

            /* FIXED  asd */


            position: fixed;
            right: 0;
            bottom: 0;
            top: 155px;
            overflow: auto;
            z-index: 5;
      width:190px;

    }

<div id="rightframe">

    <div class="left">

        <div style="width: 40px; margin: auto;">
          <a id='south-east' href='#' title='This is an example of east gravity'><i class="fa fa-camera-retro fa-3x" id="fafa"></i></a>
         <a id='south-east1' href='hehe' title='Arkiv'><i class="fa fa-list-ul fa-3x" id="fafa"></i></a>



        </div>

    </div>

    <div class="right">


        <div id="rightframeLogin">

        <form action="index.php" method="post">
        <input type="text" name="user" placeholder="Användarnamn" class="username"><br>
        <input type="password" name="passwd" class="password" placeholder="Lösenord"><br>
        <input type="submit" name="submit" value="Logga in" class="submit">
        </form>

        </div>


        <div class="display">

            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>

            inget dudå?

            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>
            too vad gör du? haha hehe :D <br> <br>

            inget dudå? vaaaaaaad 234234



        </div>

    </div>

</div>