html - 侧边导航栏左侧的空白区域
问题描述
我正在尝试为我在 ASP.NET 中的视图制作一个侧边栏。
我快完成了,但我的侧边栏左侧有一个空白区域,这导致宽度超过 100%(注意滚动条)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Profile</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="~/Content/profilePageSheet.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><a href="#">Profile</a></li>
<li><a href="#">Job experience</a></li>
<li><a href="#">Profile details</a></li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<a href="#" class="btn btn-success" id="menu-toggle">Menu</a>
<h1>Profile</h1>
<p>
Lorem ipsum dolor...
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Menu toggle script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
</script>
CSS
#wrapper {
float:left;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
/* Sidebar */
#sidebar-wrapper {
z-index: 1;
position: absolute;
width: 0;
height: 100%;
overflow-y: hidden;
background: #2C3E50;
border: 2px solid red;
opacity: 0.9;
transition: .5s ease-out;
}
/* Always take up entire screen */
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
border: 5px solid blue;
transition: .5s ease-out;
}
/* Change with of sidebar from 0 to 250px */
.menuDisplayed #sidebar-wrapper {
width: 250px;
}
/* Since we added left padding, we need to shrink the width by 250px */
.menuDisplayed #page-content-wrapper {
padding-left: 250px;
}
/* Sidebar styling - the entire ul list */
.sidebar-nav {
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #ddd;
}
.sidebar-nav li a:hover {
background: #afaeae;
}
我也尝试将其添加到我的样式表中:
#wrapper {
float:left;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
对我来说似乎是一个风格问题。由于我在 Visual Studio ASP.NET 中工作,你知道是否有一个自动生成的 CSS 文件可能会干扰吗?
解决方案
虽然它不能完全回答你的问题,但这一点
#page-content-wrapper {
width: 100%;
margin-right: 20%;
position: absolute;
padding: 15px;
border: 5px solid blue;
transition: .5s ease-out;
}
可能会给您带来一些问题。您将元素的宽度设置为 100%,然后在每边添加 15px 的填充(因为填充位于块元素内部,所以它被添加到宽度中)。
此外,您的边框也会增加块元素的宽度,进一步增加水平滚动。
推荐阅读
- angular - Spring Boot + Angular:所需参数不存在
- c++ - 在 MSVC 中未正确调用自定义分配器
- firebase - 如果我第二天打开应用程序,我是否会再次在 Firestore 中收取文件读取费用?
- windows - 将文件名传递给Powershell中的变量?
- r - 在参数默认值中使用 If 语句
- laravel - 如果第一个循环已经在 laravel 中显示相同的帖子,则不要在第二个循环中显示重复的帖子
- ms-access - 单个按钮上的 2 个命令
- android - 无法在颤动中注销firebase
- reactjs - 使用 setTimeout 延迟在 useEffect 中反应 setInterval
- apache - Apache2 在启动时崩溃,但在手动启动时不会