文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >位置固定和溢出:自动不显示所有内容，也IE修复？

问位置固定和溢出:自动不显示所有内容，也IE修复？
EN

Stack Overflow用户
提问于 2015-01-13 06:12:49
回答 1查看 67关注 0票数 0

我的HTML和CSS代码：

​

代码语言：javascript
复制
    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%;
        		
        }
代码语言：javascript
复制
    <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的修复方法吗？

如果需要链接来理解代码，请告诉我，这样我就可以链接网页了！

html
css
EN

回答 1

Stack Overflow用户

发布于 2015-01-13 06:31:21

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

我从div中删除了.right类。

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

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

你还有一些多余的css可以清理掉。

​

代码语言：javascript
复制
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;

    }
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/27911642

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档