Body Div正在移动侧边栏布局

时间：2015-09-10 03:11:37

标签： css asp.net-mvc

我的项目需要在整个应用程序中使用静态布局。问题是，布局具有可扩展的菜单，当在侧边栏中展开菜单时，我的“RenderBody”div的内容随之向下移动。我尝试将位置设置为“绝对”，但只要其中一个侧边菜单扩展，它仍会移动。我知道这应该可以使用CSS正常工作，但我尝试的任何东西似乎都没有用。这是我的_Layout.cshtml页面的内容：

 <div id="wrapper" class="toggled">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <div class="sidebar-inner">
                <ol class="sidebar-nav tree ">
                    <li>
                        @foreach (var item in @CompanyTree)
                        {
                            <label for="subfolder1" ><a href="" class="glyphicon-pencil">@item.vchCompanyName.Value</a></label>
                            <input type="checkbox" id="subfolder1" checked="true" />
                        }

                    </li>

                </ol>
                <footer>
                    <div>Main company hierarchy and other companies associated with your login </div>

                </footer>
            </div>
        </div>
        <!-- /#sidebar-wrapper -->
        <!-- Page Content -->
        @*<div id="page-content-wrapper">

            <div class="container-fluid">*@
                <div class="page-header">
                    <button id="menu-toggle" class="btn menu nofocus">
                        <i class="glyphicon glyphicon-compressed" aria-hidden="true"></i>
                    </button>
                    <div class="header-bar">
                        <div class="search-group">
                            <ul class="nav navbar-nav">
                                <li>
                                    <form class="navbar-form group" _lpchecked="1">
                                        <div class="inner-addon left-addon">
                                            <i class="glyphicon glyphicon-search dark"></i>
                                            <input type="text" id="txtSearch" class="form-control search" placeholder="Search for Company" />
                                        </div>
                                    </form>
                                </li>
                                <li>
                                    <span id ="textSearch" class="btn btn-default btn-sm search" >Search</span>
                                    @*<a id="advancedSearch" class="adv-search" href="@searchPageHref">Advanced Search</a>*@

                                </li>
                            </ul>
                        </div>
                        <div class="group navbar-header">

                        </div>

                        <div class="pull-right">

                            <ul class="nav navbar-nav">
                                <li><button class="btn btn-link" id="butHome" onclick="javascript: window.location.href='@homePage'; return false;"><i class="glyphicon glyphicon-home" aria-hidden="true"></i><span>Home</span></button></li>
                                <li><button class="btn btn-link" onclick="javascript:window.close();"><i class="glyphicon glyphicon-off" aria-hidden="true"></i><span>Log Out</span></button></li>
                            </ul>
                        </div><!-- /.navbar -->
                        <div class="group navbar-header">
                            <a class="navbar-brand" href="http://www.pecsafety.com" target="_blank" >
                                <div><img src="@Url.Content("~/Images/PEC-Logo-web.png")" height="38" />
                                &nbsp; <span class=" validation-summary-errors">@environment</span></div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="section">
                    <div class="row divider-horizontal">
                        <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2  divider-vertical">
                            <div class="company-logo text-center">
                                <img src="@CompanyLogo" />
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-8">
                            <div class="float-right">
                                Welcome: @Recall.strLoginFirstName&nbsp;@Recall.strLoginLastName <br />
                                <a href=@homePage>@Recall.strCompanyName </a>
                            </div>
                            <div class="float-left">
                                <p class="company-details col-lg-push-1 ">
                                    @CompanyData.vchCompanyName.Value &nbsp; &nbsp; SSQ ID: @CompanyData.companyID.Value<br />
                                    @CompanyData.vchOprAddress1.Value<br /><br />@CompanyData.vchOprAddress2.Value
                                    @CompanyData.vchOprCity.Value&nbsp;, @CompanyData.vchOprStateVchID.Value&nbsp; @CompanyData.vchOprPostalCode.Value
                                </p>
                                <p class="company-details col-lg-push-1">
                                    Primary Contact: @CompanyData.vchPrimContactName.Value<br />
                                    Phone: @CompanyData.vchPrimContactPhone.Value<br />
                                    Email: @CompanyData.vchPrimContactEmail.Value

                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="section">
                        <div class="row">
                            @*<div class="spacer"></div>*@
                            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 action-menu-container">
                                <div class="action-menu">
                                    @*<header>Standardized Safety Questionaire</header>*@
                                    <div class="menu-group" id="accordion" role="tablist" aria-multiselectable="true">
                                        <div class="menu">
                                            @foreach (var menuItem in @MyCompanyMenu)
                                            {

                                                if (String.IsNullOrEmpty(@menuItem.pageUrl.Value))
                                                {
                                                    if (@menuItem.menuId.Value != "1")
                                                    {
                                                        @:</ul>
                                                        @:</div>
                                                    }

                                                    @:<div class="menu-heading" role="tab" id="@menuItem.headerId.Value">
                                                        @:<a data-toggle="collapse" data-parent="#accordion" href="@menuItem.collapseRef.Value" aria-expanded="false" aria-controls="@menuItem.collapseId.Value" class="collapsed">
                                                            @:<h4 class="menu-title list-group-item">
                                                                @:<span>@menuItem.menuName.Value</span>
                                                                @:<i class="glyphicon glyphicon-menu-down" aria-hidden="true"></i>
                                                                @:</h4>
                                                            @:</a>
                                                        @:</div>
                                                    @:<div id="@menuItem.collapseId.Value" class="menu-collapse collapse" role="tabpanel" aria-labelledby="@menuItem.headerId.Value">
                                                        @:<ul class="menu-panel">
                                                }
                                                else
                                                {
                                                    @:<li><a href="@menuItem.pageUrl.Value">@menuItem.menuName.Value</a></li>
                                                }

                                            }
                                        </ul>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

        @*</div>

    </div>*@


</div>
    <div id="body" style="margin-left:360px; margin-top:-195px; width:75%; position:absolute">
        @RenderSection("featured", required: false)
        @*<section class="content-wrapper main-content clear-fix">*@
        @RenderBody()
        @*</section>*@
    </div>
<!-- jQuery Version 1.11.1 -->
@Scripts.Render("~/bundles/bootstrap")

<!-- Bootstrap Core JavaScript -->
<script src="Scripts/bootstrap.min.js"></script>
<script>
    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });


</script>

<script>
    $(document).ready(function () {
        $("#textSearch").click(function () {
            var newURL = '@Url.Action("GeneralSearch", "Search")';           
            newURL = newURL + '?cs=' + $('#txtSearch').val();
            window.location.href = newURL;
            return false;

        });
        $("#txtSearch").keypress(function (e) {
            if (e.keyCode == 13) {
                var newURL = $('#advancedSearch').attr('href');
                newURL = newURL + '?cs=' + $('#txtSearch').val();
                window.location.href = newURL;
                return false;
            }

        });
    });

</script>
<script>

    function GoHome() {
    }
</script>



<!--Start of Zopim Live Chat Script-->
<script type="text/javascript">
    window.$zopim || (function (d, s) {
        var z = $zopim = function (c) { z._.push(c) }, $ = z.s =
        d.createElement(s), e = d.getElementsByTagName(s)[0]; z.set = function (o) {
            z.set.
            _.push(o)
        }; z._ = []; z.set._ = []; $.async = !0; $.setAttribute('charset', 'utf-8');
        $.src = '//v2.zopim.com/?12Tipn0KN5G8eOVltgjwy4kdabXh1vte'; z.t = +new Date; $.
        type = 'text/javascript'; e.parentNode.insertBefore($, e)
    })(document, 'script');
</script>
</body>
</html>

这是我的CSS：

body {
    padding-left: 0px;
    padding-right: 0px;
    min-width: 768px;
}

@media (max-width: 797px) {
    body {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.page {
    background: white;
    padding: 0;
}

.page-header {
    background: #E6E7E8;
}

button.nofocus:focus {
    outline: 0 !important;
}

.container-fluid {
    padding: 0px;
}

.row {
    margin-right: 0;
    margin-left: 0;
}

.section {
    margin-top: 15px;
}

.spacer {
    height: 10px;
}

/**** Header *************************/

.form-control.search {
    border-radius: 4px;
    box-shadow: inset 1px 3px 12px rgba(0, 0, 0, 0.6);
}

.page-header {
    padding-bottom: 0;
    margin: 0;
}

.header-bar {
    background-color: #E6E7E8;
    height: 50px;
    left: 0px;
    right: 0px;
    padding: 0;
    margin: 0;
    min-width: 768px;
}

.search-group {
    float: right;
    background: #023B5A;
    color: white;
    height: 50px;
    padding-left: 4px;
    margin-left: 10px;
    padding-right: 12px;
}

.header-bar .button-group {
    min-width: 340px;
    float: right;
    height: 50px;
}

.navbar-brand {
    padding: 7px 12px;
}

.form-control.search {
    border-radius: 8px;
    box-shadow: inset 1px 3px 12px rgba(0, 0, 0, 0.6);
    height: 28px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin: 2px 4px 0 2px;
    width: 200px;
}

/* Dark icon */
i.dark {
    color: #404041;
    font-size: 15px;
}

.navbar-nav .btn.search {
    color: white;
    background: #A2C5DF;
    font-weight: bold;
    font-size: 12px;
    margin-top: 7px;
    margin-bottom: 0px;
    height: 25px;
    padding: 2px 20px;
}

.navbar-nav > li > a.adv-search {
    padding: 0;
    margin-top: -4px;
    color: #C9D5DC;
    font-size: 10px;
    text-decoration: underline;
}

    .navbar-nav > li > a.adv-search:hover {
        background: transparent;
    }

.header-bar .btn-link {
    padding: 14px 10px;
    font-weight: bold;
    border-radius: 0;
    font-size: 14px;
}

.btn-link i {
    margin-right: 14px;
    font-size: 16px;
    top: 2px;
    vertical-align: baseline;
}

/**** Page *************************/

.divider-horizontal {
    padding-bottom: 15px;
    border-bottom: solid 1px #cecccb;
    margin-bottom: 15px;
}

.divider-vertical {
    padding-right: 15px;
    border-right: solid 1px #acacad;
}

.company-logo {
    min-height: 142px;
}

    .company-logo img {
        max-height: 132px;
    }

.company-details {
    padding-left: 20px;
}

/**** Page Menu *************************/

.btn.menu {
    left: 0px;
    height: 50px;
    width: 50px;
    background: #F58220;
    color: white;
    float: left;
    font-size: 24px;
    border-radius: 0px;
    padding: 9px;
    border: none;
}

.action-menu-container {
    max-width: 360px;
    float: left;
}

.action-menu {
    border-top: solid 1px #235470;
    margin: 0 10px;
}

    .action-menu header {
        font-weight: bold;
        font-size: 16px;
        margin: 12px 0 8px;
    }

.list-group-item.menu-title {
    background: #013d5b;
    color: #FFF;
    border: none;
    font-size: 14px;
    border-radius: 0;
    margin-top: 6px;
}

    .list-group-item.menu-title i {
        float: right;
    }

.menu-heading > .collapsed > .list-group-item.menu-title {
    background: #E6E7E8;
    color: #013d5b;
}

.list-group-item {
    font-size: 14px;
    border-radius: 0;
    text-decoration: none;
    height: 28px;
    padding: 6px 16px;
}

.menu-heading a {
    text-decoration: none;
}

ul.menu-panel {
    list-style: none;
    margin-left: 0;
    padding: 4px 16px;
    background: #E0ECF5;
    margin-bottom: 0;
}

    ul.menu-panel a {
        padding: 2px 0;
        display: block;
        font-size: 12px;
        font-weight: normal;
    }

    ul.menu-panel > li > a {
        padding: 2px 0;
        display: block;
        font-size: 13px;
        font-weight: 600;
    }

    ul.menu-panel > li ul {
        list-style: disc;
        padding-left: 20px;
        color: #013d5b;
    }

/**** Page Widgets ****************************/

.widget {
    min-height: 300px;
    border: solid 1px #cbcacb;
    padding: 10px;
    position: relative;
}

    .widget header {
        font-weight: bold;
        font-size: 16px;
    }

    .widget .actions {
        float: right;
    }

        .widget .actions .btn {
            border: none;
            padding: 2px 10px;
            border-radius: 9px;
        }

            .widget .actions .btn > span {
                padding-right: 12px;
            }

    .widget .primary-metric {
        position: absolute;
        left: 10px;
        top: 100px;
        top: calc(50% - 50px);
        text-align: center;
        width: 150px;
    }

        .widget .primary-metric label {
            font-size: 60px;
            line-height: 72px;
            color: #A0CC42;
            font-weight: bold;
        }

        .widget .primary-metric .caption {
            font-size: 18px;
            margin: 8px 0;
            color: #999;
        }

    .widget .graph-container img {
        width: 100%;
        height: 100%;
    }

    .widget .graph-container {
        position: absolute;
        right: 10px;
        top: 41px;
        left: 170px;
        bottom: 10px;
    }

/**** Sidebar *******************************/

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    #wrapper.toggled {
        padding-left: 250px;
    }

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow: hidden;
    background: #404041;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 0px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

.sidebar-inner {
    border-radius: 12px;
    background: #ffffff;
    position: absolute;
    top: 20px;
    bottom: 20px;
    width: 210px;
    left: 20px;
    overflow-y: auto;
}

    .sidebar-inner footer {
        bottom: 0px;
        position: absolute;
        margin: 20px;
        border-top: solid 1px #69696A;
        padding-top: 6px;
        left: 0;
        right: 0;
    }

        .sidebar-inner footer a {
            color: #F58220;
        }

.sidebar-nav {
    list-style: none;
    margin-top: 20px;
}

    .sidebar-nav li {
        line-height: 26px;
    }

        .sidebar-nav li a {
            display: block;
        }

            .sidebar-nav li a:hover {
                color: #F58220;
            }

    .sidebar-nav > .sidebar-brand {
        height: 65px;
        font-size: 18px;
        line-height: 60px;
    }

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

        #wrapper.toggled {
            padding-left: 0;
        }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 0px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}

/**** CSS Tree menu styles *************************/

ol.tree {
    font-size:xx-small;
}

    ol.tree li {
        position: relative;
        margin-left: -15px;
        list-style: none;
    }

        ol.tree li input {
            position: absolute;
            left: 0;
            margin-left: 0;
            opacity: 0;
            z-index: 2;
            cursor: pointer;
            height: 1em;
            width: 1em;
            top: 0;
        }

            ol.tree li input + ol {
                margin: -0.938em 0 0 -44px; /* 15px */
                height: 1em;
            }

                ol.tree li input + ol > li {
                    display: none;
                    margin-left: -14px !important;
                    padding-left: 1px;
                }

        ol.tree li label {
            cursor: pointer;
            display: block;
        }

        ol.tree li input:checked + ol {
            margin: -1.25em 0 0 -44px; /* 20px */
            padding: 1.25em 0 0 80px;
            height: auto;
        }

            ol.tree li input:checked + ol > li {
                display: block;
                margin: 0 0 0.125em; /* 2px */
            }

                ol.tree li input:checked + ol > li:last-child {
                    margin: 0 0 0.063em; /* 1px */
                }


.centerBlock{
   position:absolute; 
   left:50%; 
   top:50%;
}

非常感谢任何帮助！

0 个答案:

没有答案
相关问题
最新问题