我正在使用固定位置的侧边栏导航。问题是它会在每个打开的页面上阻止其背后的内容:
它不应该是这样的。当屏幕改变它的大小时,我希望侧边栏和页面内容并排,而不是一个在另一个之上。我怎样才能让它发生?侧边栏的HTML和CSS代码如下:
HTML:
<div class="sidenav">
@Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
@Html.ActionLink("Vendedores", "Index", "Vendedores", new { area = "" }, new { @class = "navbar-brand" })
@Html.ActionLink("Vendas", "Index", "Venda", new { area = "" }, new { @class = "navbar-brand" })
<footer class="footer">
<p>© @DateTime.Now.Year - Vendedores</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<div class="container body-content">
@RenderBody()
<hr />
</div>
CSS:
/*CSS da barra lateral*/
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
float: left;
top: 0;
left: 0;
background-color: #111;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* 2017 - Vendedores*/
.footer {
color: #818181;
position: fixed;
left: 2%;
bottom: 0px;
width: 100%;
}
最佳答案
为您的主要内容留出与固定侧边栏宽度相同的左边距.. IE..
margin-left: 100px;
关于html - 我的 Sidenav 阻止页面中的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45441016/