gpt4 book ai didi

html - 侧边栏正在延伸过去的视口(viewport)

转载 作者:太空宇宙 更新时间:2023-11-04 12:12:06 25 4
gpt4 key购买 nike

我有一个 website我想要标题和侧边栏的地方。

我的预期功能是侧边栏延伸到页面底部,它做到了。但是,它的内容超出了视口(viewport),我猜是因为 .menu 的大小为整个主体容器的 100%,但由于 header 而被向下推。

如何使菜单只延伸到视口(viewport)下方?

<body>
<div class="container-fluid">
<header class='row'>
<div class="col-md-1">
<a href="#" class="menu-icon-link">
<i class="glyphicon glyphicon-list"></i>
</a>
</div>
<div class="input-group col-md-4 col-md-offset-4">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</header>

<div class="row menu-container">
<div class="menu col-md-2">
Lorem ipsum...
</div>
</div>
</div>
</body>

我的 CSS:

html, body{ 
height: 100%;
margin: 0;
padding: 0;
}

body {
position: relative;
padding: 3.5em 0 0 0;
box-sizing: border-box;
}

.menu-container {
display: block;
}

.menu {
position: fixed;
top: 3.5em;
padding: 1em;
background: #A9E2AD;
height: 100%;
overflow-y: scroll;
}

.glyphicon-list {
font-size: 1.5em;
color: #FFF;
}

header {
background: #50af4c;
color: #fff;
position: fixed;
top: 0;
width: 100%;
padding: 0.5em 1em;
display: block;
}

最佳答案

您不需要使用明确的高度,您可以根据需要使用定位。

.menu {
position: fixed;
top: 3.5em;
bottom: 0; //add this
padding: 1em;
background: #A9E2AD;
//height: 100%;
overflow-y: scroll;
}

关于html - 侧边栏正在延伸过去的视口(viewport),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28976956/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com