我想在网站左侧创建一个菜单。主要思想是youtube如何制作它:
你在顶部有一个条形(固定),总高度为40px,宽度为100%
在左边你有菜单。您可以使用顶部栏中的按钮打开和关闭它。如果菜单打开,则左侧有一个固定的菜单,里面有一个自己的滚动条。菜单是100%高度-40px(从顶部栏中撤回)
当菜单关闭时,内容的宽度为100%,当菜单打开时,内容的宽度为100% - 菜单
窗口滚动条仅滚动内容。菜单和顶栏是固定的。
这是一个小例子:http://output.jsbin.com/gehatitaxe
小提琴也是如此:
<!-- http://jsfiddle.net/zyam1m79/ -->
但现在我遇到了问题,100%的菜单无法从顶部栏中撤回40px。所以内部滚动条可以滚动一个小窗口(到底部)。在菜单文本中有一个&#34; x&#34;最后,当您全部滚动到菜单底部时,无法读取它。
我该如何解决这个问题?如何将固定元素高度设置为100%并且它不会占用窗口高度,而是将en元素的高度设置为更高级别?
问候和感谢任何帮助,
克里斯托弗
答案 0 :(得分:2)
您可以使用CSS calc
属性计算100%高度减去顶部栏。例如:
.main_left {
height: calc(100% - 40px);
/* ... */
}
我注意到您在顶部和底部都有填充,因此上面的40px
也需要包含它,因此calc(100% - 120px);
。要么是这样,要么添加box-sizing: border-box;
,以便填充不会增加容器的高度。
答案 1 :(得分:2)
使用position: fixed
时,请尽量避免使用100%宽度/高度。相反,使用left: 0; right: 0
表示100%宽度,top: 0; bottom: 0
表示100%高度。请参阅以下示例:
.table { display: table; } /* table */
.table > * { display: table-row; } /* tr */
.table > * > * { display: table-cell; } /* td */
/* main container */
.main{
position: relative;
min-width: 1024px;
}
/* top */
.main_head{
width: 100%;
height: 40px;
position: fixed;
left: 0;
right: 0;
top: 0;
transform: translateZ(0px);
z-index: 1999999999;
}
.main_head > div > div{ /* all + search */
border: 1px solid #000;
}
.main_head > div > div:first-child{ /* menu */
border: 1px solid #000;
}
.main_head > div > div:first-child > i{
font-size: 40px;
}
.main_head > div > div:last-child{ /* User information */
width: 400px;
}
/* Container menu + content */
.main_left_content{
}
/* left: menu */
.main_left{
width: 200px;
left: 0;
top: 0;
bottom: 0;
padding-top: 40px;
padding-bottom: 40px;
border: 1px solid #000;
position: fixed;
}
.main_left > div{
position: absolute;
background-color: red;
top: 40px;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
}
/* right: content */
.main_content{
border: 1px solid #000;
vertical-align: top;
}
<div class="main">
<div class="main_head table">
<div>
<div>
<i class="fa fa-bars fa-lg"></i>
</div>
<div>Suche</div>
<div>User Information</div>
</div>
</div>
<div class="main_left_content table">
<div>
<div class="main_left">
<div>
<div>
Menü<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />x
</div>
</div>
</div>
<div class="main_content">
Content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />x
</div>
</div>
</div>
</div>