Question

大家好我有这个代码：

  <div id="admin-left-menu">
    <div class="admin-menu-title"><center><span>HI</span>PEOPLE</center></div>
    <div class="admin-menu-avatar">

    <center><img src="https://s-media-cache-ak0.pinimg.com/236x/9a/ff/c4/9affc464003b8c06bd7b0f478da8ce4c.jpg"></center>


    <?=$_SESSION['username']?>

    <br>
    <br>

</div>


    <div class="division-disabled">Geral</div>
    <div class="division-checked"><a href="javascript:window.location.href=window.location.href">Página Inicial</a></div>
        <div class="division"><a href="references.php">Referencias</a></div>
    <div class="division"><a href="banners.php">Banners</a></div>
    <div class="division"><a href="advertising.php">Publicidade</a></div>
    <div class="division-disabled">Zona de trabalho</div>
    <div class="division"><a href="games.php">Jogos</a></div>
    <div class="division"><a href="channels.php">Canais</a></div>
    <div class="division"><a href="films.php">Filmes</a></div>
    <div class="division-disabled">Ferramentas</div>
    <div class="division"><a href="userlist.php">Lista de users</a></div>
    <div class="division"><a href="adduser.php">Adc. user manualmente</a></div>


    </div>

当我有一个大清单时，侧边栏不能正常工作。

我的css代码在这里：

 #admin-left-menu {width: 208px; background: #33414E; height: 100%; position:absolute; left: 0px; top: 0px;}
.admin-menu-title{height: 39px; width: 208px; background: #CE9715; color: #FFFFFF; font-size:15px; padding: 16px 0px 0px 0px;}
.admin-menu-title span{font-weight:none !important; color: #111111;}
.admin-menu-avatar {width: 208px; height: 160px; border-bottom: 1px solid #273541; border-top: 1px solid #273541; background: #2D3945; color: #FFFFFF; text-align:center; font-size: 11px;}
.admin-menu-avatar img{width: 80px; height: 80px; border-radius: 100%; margin:20px 0px 9px 0px;}
.admin-menu-role {margin: -12px 0px 0px 0px; color: #CE9715;}

.division-disabled{padding: 17px; font-size: 11px; color: #AAAAAA; border-bottom: 1px solid #273541}
.division-checked{padding: 17px 32px; font-size: 11px; border-bottom: 1px solid #273541;}
.division-checked a{ text-decoration: none;  color: #CE9715;}
.division{padding: 17px 32px; font-size: 11px; color: rgb(170, 170, 170); border-bottom: 1px solid #273541;}
.division a{ text-decoration: none; color: #FFFFFF;}
.division a:hover{color: #CE9715; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out;}

任何人都可以帮助我吗？要解决高度（％）或滚动..

我尝试了许多方法，但结果是：

http://prntscr.com/5sklur

Answer 1

只需在height规则

中将min-height更改为#admin-left-menu即可

http://jsfiddle.net/5zgt29hg/1/

演示

Answer 2

起初，我没有看到你的问题是什么原因我在装载你的页面时没有遇到同样的问题;然而，在缩小浏览器时，我看到了你所看到的内容。

要解决此问题，请在＃admin-left-menu样式中，将 height 属性更改为“ auto ”，而不是“100％”

希望这有帮助！

如何制作全高侧边菜单？

2 个答案: