我的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也有修复方法吗？
如果需要链接来了解代码，请告诉我，以便我可以链接网页！
答案 0 :(得分：0)
问题是您将.right.display的高度设置为100％。这可以在两个地方完成：一次在.right的CSS规则中，一次在.display的规则中。
我从div中删除了.right类。
我从height:100%;的规则中移除了.display行。
最后，我在width:190px;规则中添加了.display。 （通过从元素中删除.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>