[英]Creating a sidebar with CSS while also having a topbar
I am trying to create a sidebar with CSS while also having a topbar in the same window. 我正在尝试使用CSS创建侧边栏,同时在同一窗口中也具有顶部栏。 I have a
<div id="topbar">
and a <div id="sidebar_left">
in my html file. 我的html文件中有一个
<div id="topbar">
和一个<div id="sidebar_left">
。 In the topbar there are icons to open, save and load, etc. In the sidebar there is a list of files. 在顶部栏中,有用于打开,保存和加载等的图标。在侧面栏中,有文件列表。 If the list is longer than the window's height, it should be possible to scroll only the sidebar but not the whole page.
如果列表长于窗口的高度,则应该只滚动边栏,而不滚动整个页面。
My CSS: 我的CSS:
#topbar{
height: 40px;
background: #ddd;
border-bottom: 1px #aaa solid;
width: 100%;
}
#topbar img{
height: 32px;
width: 32px;
}
#sidebar_left{
overflow-y: scroll;
min-width: 150px;
position: fixed;
height: 100%;
float: left;
background: #f0f0f0;
border-right: 1px #aaa solid;
padding-right: 20px;
}
#sidebar_left h1{
font-size: 1em;
}
#sidebar_left ul{
list-style: square;
}
#sidebar_left a{
color: #555;
text-decoration: none;
}
#sidebar_left li{
}
#sidebar_left ul li img{
height: 16px;
width: 16px;
margin-right: 6px;
}
My problem is that the sidebar is pushed down by the topbar's height and therefore is not visible completely (it is cropped at the bottom). 我的问题是,边栏被顶部栏的高度向下推,因此无法完全看到(在底部裁剪)。 If I delete the topbar-div from my html file the sidebar is visible completely.
如果我从html文件中删除topbar-div,则侧边栏完全可见。 I think I could solve this with JavaScript by setting the sidebar's height to (window's height) - (topbar's height).
我想可以通过将侧边栏的高度设置为(窗口的高度)-(顶栏的高度)来使用JavaScript解决此问题。 Is there a way I can do it without JavaScript?
有没有JavaScript的方法吗?
Set #topbar
position:fixed
or position:absolute
and give sidebar top offset for #topbar
s height. 设置
#topbar
position:fixed
或position:absolute
并为#topbar
的高度提供侧边栏顶部偏移。
In case of #topbar
position:absolute
remember to add position:relative
to #topbar
's parent. 在
#topbar
position:absolute
情况下,请记住添加position:relative
对于#topbar
父级的position:relative
。
You can use the css calc
function. 您可以使用css
calc
函数。 You can just add height: calc(100% - 80px);
您可以添加
height: calc(100% - 80px);
to your sidebar and change the the subtraction to whatever your topbar's height is. 到侧边栏,然后将减法更改为顶部栏的高度。
Here is the W3Schools page about it: http://www.w3schools.com/cssref/func_calc.asp 这是有关它的W3Schools页面: http : //www.w3schools.com/cssref/func_calc.asp
Try this: 尝试这个:
#topbar {
height: 40px;
background: #ddd;
border-bottom: 1px #aaa solid;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
#sidebar_left {
overflow-y: scroll;
min-width: 150px;
position: fixed;
height: 100%;
background: #f0f0f0;
border-right: 1px #aaa solid;
top: 41px;
left: 0px;
padding-right: 20px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.