Question

我正在尝试在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文件是否会干扰？

Answer 1

虽然它没有完全回答你的问题，但这一点

#page-content-wrapper {
    width: 100%;
    margin-right: 20%;
    position: absolute;
    padding: 15px;
    border: 5px solid blue;
    transition: .5s ease-out;
}

可能会引起一些问题。您将元素的宽度设置为100％，然后向每边添加15px的填充（因为填充位于块元素内部，它被添加到宽度中）。

此外，您的边框也会添加到块元素宽度，进一步添加到水平滚动。

侧导航栏左侧的空白区域

1 个答案: