Question

我在我的引导程序网站上创建了一个全高度侧边栏，但是当我调整浏览器大小时，它就会出错，正如您在下面的屏幕截图中看到的那样。

如何在调整大小时使其达到全高，并将所有内容保持在蓝色边？非常感谢！

HTML代码：

<!DOCTYPE html>

<html>

    <head>
        <meta charset="utf-8" />

        <link rel="stylesheet" href="dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="hover-min.css" />
        <link rel="stylesheet" href="main.css" />
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="animate.css">

        <script type="application/javascript" src="dist/js/jquery-2.1.4.min.js"></script>       
        <script type="application/javascript" src="dist/js/bootstrap.min.js"></script>
        <script src="script/jquery.js" type="text/javascript"></script>
        <script src="background.js" type="text/javascript"></script>
    </head>

    <body>

        <div class="container-fluid">

            <div class="row animated fadeInLeft">

                <!-- -- -- -- BLUE SIDE -- -- -- -->
                <div class="col-lg-1" id="blueside">

                    <!-- -- -- -- LOGO -- -- -- -->
                    <h1 class="brandlogo animated fadeInLeft">
                        First name <br/>
                        NAME <br/>
                        <span class="orange">
                        JOB <br/>
                        Company<br/>
                        </span> 
                    </h1>

                    <!-- -- -- -- MENU WHY HOW WHO -- -- -- -->
                    <div class="brandlogo text-center animated fadeInLeft" id="menu">
                        <h2><a href="http://www.google.com">WHY</a></h2>
                        <h2><a href="http://www.google.com">HOW</a></h2>
                        <h2><a href="http://www.google.com">WHO</a></h2>
                    </div>


                    <!-- -- -- -- HIRE ME ITEMS-- -- -- -->
                    <div id="hireme" class="text-center">

                        <!-- -- -- -- PORTFOLIO -- -- -- -->
                        <h1 class="brandlogo">Portfolio</h1>

                            <!-- -- -- -- YELLOW DOT -- -- -- -->
                            <div class="puce"><!-- PUCE --></div>

                        <!-- -- -- -- RESUME -- -- -- -->
                        <h1 class="brandlogo hireMeItem">Resume</h1>
                            <div id="viewPDF" class="hvr-underline-from-center"><p>View PDF</p></div>
                            <div class="resumeBox hvr-underline-from-center"><span class="glyphicon glyphicon-download-alt resumeBoxIcon"></span></div>
                            <div class="resumeBox hvr-underline-from-center"><span class="glyphicon glyphicon-print resumeBoxIcon"></span></div>
                            <div class="resumeBox hvr-underline-from-center"><span class="glyphicon glyphicon-share-alt resumeBoxIcon"></span></div>

                            <!-- -- -- -- YELLOW DOT -- -- -- -->
                            <div class="puce"><!-- PUCE --></div>

                        <!-- -- -- -- CONTACT -- -- -- -->
                        <h1 class="brandlogo">Contact</h1>
                            <div id="viewPDF" class="hvr-underline-from-center"><p id="contactNumber">+336 31 94 74 90</p></div>
                            <div class="contactBox hvr-underline-from-center"><i id="contactIcon" class="fa fa-at"></i></div>
                            <div class="contactBox hvr-underline-from-center"><i id="contactIcon" class="fa fa-skype"></i></span></div>

                    </div> <!-- #hireme -->

                </div> <!-- #blueside -->

            </div> <!-- .container-fluid -->

        </div> <!-- .container -->

    </body>

</html>

CSS代码

 /* GENERAL SETTINGS*/
html,body{height:100%;}
.container-fluid, .row {
    height:100%;
}
a:hover {
    color : yellow;
    text-decoration : none;
}
a {
    text-decoration : none;
    color : white;
}

/* HOMEPAGE BLUE FILTER EFFECT - not for this page */
img.nyc {
    /*position:fixed;*/
    left:0;
    z-index:-1;
}
#opacity {
    position : fixed;
    background-color: #428BCA;
    display:inline-block;
} 
#opacity img {
    opacity: 0.5;
    -webkit-animation: animation 1s linear;
    -moz-animation: animation 1s linear;
    -ms-animation: animation 1s linear;
    -o-animation: animation 1s linear;
    animation: animation 1s linear;
}
@-webkit-keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}
@-moz-keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}
@-ms-keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}
@-o-keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}
@keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}
#landingpage {
    padding : 20px;
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
#logodiv {
    position : absolute;
    z-index : 0;
}
#rowlandingpage {
    display: table-cell;
    vertical-align: middle;
}
.brandlogo{
    color : white;
    font-family : Roboto, sans serif;
    font-weight : 900;
    font-size : 2em;
    line-height : 22px;
    margin-top : 0;
    margin-bottom : 0;
}
.brandlogo h2{
    color : white;
    font-family : Roboto, sans serif;
    font-weight : 900;
    font-size : 1em;
    line-height : 30px;
    margin-top : 20px;
    margin-bottom : 0;
}
.yellow {
    color : yellow;
}

#claim{
    color : white;
    font-family : Roboto, sans serif;
    font-weight : 900;
    font-size : 4.5em;  
    margin-top : -100px;;
}

#singlebutton {
    background-color : yellow;
    color : #61A4D3;
    font-family : Roboto, sans serif;
    font-weight : 900;
    font-size : 1.5em;
    border-radius: 1px;
    border-style : none;
    width : 190px;
    height : 50px;
}

#blueside{
    width : 150px;
    height:100%;
    min-height:100%;
    background-color: #64A5D4;
    padding:10px;
    color:#efefef;
    box-shadow: 6px 0px 10px grey;
}

#menu {
    margin-top : 50px;
}

#hireme {
    margin-top : 80px;
}

.puce{
    -moz-border-radius: 10px/10px;
    -webkit-border-radius: 10px 10px;
    border-radius: 10px/10px;
    border:solid 8px yellow;
    width:8px;
    height:8px;   
    margin-left : auto;
    margin-right : auto;
    margin-top : 20px;
    margin-bottom : 20px;
}

#viewPDF{
    background-color : red;
    color : #61A4D3;
    font-family : Roboto, sans serif;
    font-weight : 900;
    font-size : 1em;
    width : 110px;
    height : 30px;
    line-height : 30px;
    margin-left : auto;
    margin-right : auto;
    margin-top : 5px;
}

.resumeBox {
    background-color : red;
    width : 34px;
    height : 30px;
    line-height : 30px;
    margin-top : 5px;
}

.resumeBoxIcon {
    color : #64A5D4;
}

#contactNumber {
    font-size : 0.88em;
}

.contactBox {
    background-color : red;
    width : 53px;
    height : 30px;
    line-height : 30px;
    margin-top : 5px;
}

#contactIcon {
    color : #64A5D4;
    font-size : 1.5em;
    line-height : 30px;
    height:30px;
}

Answer 1

试试这个：

#blueside{
    width : 150px;
    height: auto;
    background-color: #64A5D4;
    padding:10px;
    color:#efefef;
    box-shadow: 6px 0px 10px grey;
}

Answer 2

如果您希望侧边栏始终占据100％的高度，并始终保持侧面，

body {
    height:100%;
    /* Make room for the sidebar */
    margin-left:150px;
}

#blueside {
    position:fixed;
    left:0;
    top:0;
    height:100%;
    width:150px;
    background-color: #64A5D4;
    padding:10px;
    color:#efefef;
    box-shadow: 6px 0px 10px grey;
}

固定定位确保侧边栏保持在侧面，占据相同的宽度，并始终保持100％的高度。

您还可以在#blueside div中添加一个包装器，例如.sidebar-wrapper，然后添加height:100%;width:100%;overflow-y:scroll;，这样您的侧边栏内容就可以滚动，并且始终位于正确的位置。

Answer 3

试试这个小提琴http://jsfiddle.net/owLnxcz5/

使用col-md-3代替col-lg-1

全高度调整错误

3 个答案: