overflow:hidden属性在google chrome中有效,而在Firefox和Microsoft Edge中不可用,我正在使用它为侧边栏提供完整的页面高度,以便它具有相同的正文高度。
样式:
.sidebar {
position:absolute;
width: 225px;
background-color: #4b4b4b;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
html:
<div class="sidebar">
<div class="nav-item active">
<a class="nav-link border-bottom border-warning {{Request::path()=='home' ? 'selectioné' : ''}}" href="home"><span>Dashboard</span></a>
</div>
<div class="nav-item">
<a class="nav-link border-bottom border-warning {{Request::path()=='register' ? 'selectioné' : ''}}" href="register"><span>Ajout Compte</span></a>
</div>
<div class="nav-item">
<a class="nav-link border-bottom border-warning" href="*******"><span>*******</span></a>
</div>
<div class="nav-item">
<a class="nav-link border-bottom border-warning" href="/telescope" target="_blank"><span>Telescope</span></a>
</div>
<div class="nav-item">
<a class="nav-link border-bottom border-warning" href="tables.html"><span>Tables3</span></a>
</div>
<div class="nav-item">
<a class="nav-link border-bottom border-warning" href="tables.html"><span>Tables4</span></a>
</div>
</div>
body:
body {
position: relative;
min-height: 100vh;
padding-bottom: 4.5rem;
}
页脚:
footer {
position: absolute;
border-radius: 12px;
right: 0;
bottom: 0;
width: calc(100% - 225px);
height: 80px;
background-color: #e2e2e2;
text-align: center;
padding-top: 28px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
主要:
.main {
width: 100%;
padding-left: 225px;
padding-top: 11px;
padding-bottom: 30px;
}
我该如何在所有浏览器中使用它?
答案 0 :(得分:0)
从margin-bottom: -5000px; padding-bottom: 5000px;
CSS中删除.sidebar
并添加min-height: 100vh;
,希望它能解决您的问题。谢谢
.sidebar {
position:absolute;
width: 225px;
min-height: 100vh;
background-color: #4b4b4b;
overflow: hidden;
}
答案 1 :(得分:0)
尝试:
.sidebar {
width: 225px;
background-color: #4b4b4b;
position: absolute;
top: 60px;
bottom: 0;
}