Question

我正在尝试为您拥有Leftmenu栏的网站编码，以及右侧的内容。内容和左侧菜单栏都应单独滚动。

我遇到的问题是：

当内容滚动时，左侧菜单栏未覆盖100％的页面
页面垂直调整大小时，“页脚”（订阅/联系人）不会保持在底部

有人能提供一些意见吗？

此处代码：http://codepen.io/anon/pen/rVXErO

CSS：

* {
                margin:0 auto;
                padding:0px;
            }

            html, body {
                margin: 0 auto;
                padding:0px;
                min-height: 100%;
                height: 100%;
            }

            /*Main container for body*/
            .container {
                position: relative;
                display: table;
                min-height: 100%;
                height: 100%;
                width:100%;
            }

            .container > div {
                display: inline-block;
                vertical-align: top;
            }

            .leftmenu {
                position: relative;
                width: 22%;
                min-height: 100%;
                margin-left: 0px;
                height; 100%;
                z-index: 99;
                background-color:#28aadc;
                box-shadow: 2px 0px 30px 4px;
                overflow: auto;
            }

            .leftmenu > h1 {
                font-size: 45px;
                width: auto;
                color:white;
                text-align: center;
                font-family: 'arkhip';
                padding-top: 10px;
            }

            .leftmenu .social {
                position: relative;
                color:#00648c;
                text-align: center;
                margin-top: 10px;
                margin-bottom: 35px;
            }

            .leftmenu .social .fa {
                font-size: 20px;
                margin-left: 3px;
                margin-right: 3px;
            }

            .leftmenu .social .fa:hover {
                color:white;
                cursor: pointer;
            }

            .leftmenu .nav {
                position: relative;
                height: auto;
                padding-bottom: 12px;
            }

            .leftmenu .nav ul {
                height: auto;
                width: auto;
                text-align: center;
            }

            .leftmenu .nav ul li {
                width: 100%;
            }

            .leftmenu .nav ul li > a {
                margin-top: 5px;
                width:80%;
                display: block;
                text-decoration: none;
                color:#00648c;
                font-family: 'arkhip';
                font-size: 15px;
                padding:5px;
            }

            .leftmenu .nav ul li > a:hover {
                color:white;
            }

            .leftmenu .footer {
                position: absolute;
                bottom:0px;
                border:1px solid red;
                width:100%;
                background-color:blue;
                padding-top: 12px;
            }

            .mainContent {
                display: table;
                position: relative;
                height: 100%;
                min-height: 100%;
                width:78%;
                margin:0 auto;
                margin-right: 0px;
            }

            #home {
                height: 100%;
                min-height: 100%;
                background-image: url(images/newyorkblurred.jpg);
                background-size: cover;
            }       

            #home > h1, #home > p {
                position: relative;
                text-align: center;
                top:50%;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                color:white;
                font-family: 'arkhip;'
            }

            #home > h1 {
                font-size: 100px;
                font-family: 'arkhip';
                margin:0 auto;
            }

            #home > p {
                text-align: center;
                margin:0 auto;
                font-family: 'arkhip';
                margin-top: -60px;
                font-size: 18px;
            }

            #gallery, #about, #contact, #videos {
                height: 100%;
                min-height: 100%;
            }

            #videos {
                background-color:black;
            }

            #about {
               background-color:aqua;
            }

            #gallery {
                background-color:red;
            }

            #contact {
                background-color:gray;
            }

            @media screen and (max-width:767px) {
                .leftmenu > h1 {
                    font-size: 80%;
                }
            }

HTML：

<div class="container">
            <div class="leftmenu">
                <h1>Sidebar</h1>

                <div class="social">
                    <span class="fa fa-facebook"></span>
                    <span class="fa fa-instagram"></span>
                    <span class="fa fa-twitter"></span>
                    <span class="fa fa-youtube"></span>
                    <span class="fa fa-vine"></span>
                    <span class="fa fa-tumblr"></span>
                    <span class="fa fa-google-plus"></span>
                    <span class="fa fa-linkedin"></span>
                </div>

                <div class="nav">
                    <ul class="navigation">
                        <li>
                            <a href="#home">Home</a>
                        </li>
                        <li>
                            <a href="#videos">Videos</a>
                        </li>
                        <li>
                            <a href="#gallery">Gallery</a>
                        </li>
                        <li>
                            <a href="#about">About</a>
                        </li>
                        <li>
                            <a href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>

                <div class="footer">
                    <p>Subscribe</p>
                    <p>Contact</p>
                </div>
            </div>

            <div class="mainContent">
                <div id="home">
                    <h1>It's Magic</h1>
                    <p>You just need to believe!</p>
                </div>

                <div id="videos">
                    <h1>Videos</h1>
                </div>

                <div id="gallery">
                    <h1>Gallery</h1>
                </div>

                <div id="about">
                    <h1>About</h1>
                </div>

                <div id="contact">
                    <h1>Contact</h1>
                </div>
            </div>
        </div>

Answer 1

使用func updateSearchResultsForSearchController(searchController: UISearchController,) { filteredTableData.removeAll(keepCapacity: false) let searchPredicate = NSPredicate(format: "SELF CONTAINS[c] %@", searchController.searchBar.text) let array = (series as NSArray).filteredArrayUsingPredicate(searchPredicate) filteredTableData = array as! [String] self.tableView.reloadData() }。

position: fixed

Codepen：http://codepen.io/anon/pen/eNqwLN

Answer 2

您可以通过向position: fixed班级添加.leftmenu来解决此问题：

.leftmenu {
    position: fixed;
    height: 100%;
}

要定位主要内容，您还需要将left: 22%添加到相应的div，以便将主要内容移到右侧，以便它与侧边栏的宽度相匹配。

Answer 3

在左边的菜单中尝试：位置：固定; 宽度：200像素;

在主要内容中尝试：左：200像素

保持左侧菜单固定100％整页高度？

3 个答案: