Html 全高调整错误_Html_Css_Twitter Bootstrap

Html 全高调整错误

html css twitter-bootstrap

Html 全高调整错误,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我在我的bootstrap网站上制作了一个全高侧边栏，但是当我调整浏览器的大小时，它就出错了，正如你在下面的屏幕截图中看到的那样如何在调整尺寸时使其达到全高，并将所有内容保持在蓝色范围内？非常感谢 HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="dist/c

我在我的bootstrap网站上制作了一个全高侧边栏，但是当我调整浏览器的大小时，它就出错了，正如你在下面的屏幕截图中看到的那样

如何在调整尺寸时使其达到全高，并将所有内容保持在蓝色范围内？非常感谢

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>

试试这个：

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

如果您希望侧边栏始终占据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包装，并添加高度：100%；宽度：100%；溢出y：滚动；因此，您的侧边栏内容是可滚动的，并且始终位于正确的位置

试试这把小提琴

使用col-md-3代替col-lg-1首先，你需要一个100%高度的固定支架或两个同等高度的立柱；所有方法都需要主体{height:100%；溢出：hidden；}和.child{height:100%；溢出：auto；}

固定位置的解决方案： html{ 框大小：边框框； } html，正文{ 身高：100%；填充：0；保证金：0； } 身体{ 颜色：rgba0,0,0,2；溢出：隐藏； } *, *：之前， *：之后{ 框大小：继承； } .旁白{ 宽度：150px；身高：100%；位置：固定；溢出：自动；背景色：70c1b3； } 梅因先生{ 身高：100%；左侧填充：150px；溢出：自动；背景色：f3ffbd； } 在一边主要的

如果您将代码放在代码片段中的演示版本中，或者通过jsfiddle.jsfiffle将代码放入OP没有做的演示版本中，这可能会让用户更容易为您提供帮助：只是做了：>>>是的，它不会像在我的浏览器中那样呈现，这就是我加入屏幕截图的原因。我用代码笔更新了我的问题。谢谢，无论我做什么调整，项目都会保留在蓝色分区中。但在全尺寸下，它下面有一个空白；到蓝边。我刚刚在您的codepen示例上测试了它，它很有效……非常感谢，这是最符合我期望的解决方案。感谢所有其他贡献者也为您的时间！

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;
}