Question

我正在构建一个包含HTML＆amp;的网页CSS，使用bootstrap框架。它基于网格布局系统。我想将我的导航栏和我的网格的第一行放在一个组中，将第二行放在一个组中，其中每个组填充100％的屏幕高度。我无法看到div定义如何工作，因为它跨越两个div类的中间。我试过这个，使用calc函数，但它似乎没有用。

Here是一个JSFiddle。（注意：尝试扩展输出窗口以正确显示问题）

<div class="PageView">
    <nav class="navbar navbar-default">
        <div class="container-fluid" id="logoStripe">
            <!-- Brand and toggle get grouped for better mobile display -->
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="defaultNavbar1">
                <ul class="nav navbar-nav links">
                    <li><a href="#">About<span class="sr-only">(current)</span></a> 
                    </li>
                    <li><a href="#">Pre-Order</a> 
                    </li>
                    <img src="Images/Logo.png" alt="Logo" style="width:auto; height:75px; padding-top:5px; padding-bottom:5px;">
                    <li><a href="#">News</a> 
                    </li>
                    <li><a href="#">Contact Us</a> 
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <div class="container-fluid">
        <div class="PageView">
            <div class="row">
                <div class="col-md-12">.col-md-1</div>
            </div>
            <div class="row">
                <div class="col-md-6">Button 1 (align Right)</div>
                <div class="col-md-6">Button 2 (align Left)</div>
            </div>
        </div>
</div>

和CSS：

.links {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 28px;
    color: #FFFFFF;
}
#logoStripe {
    background-color: #54534a;
}
.PageView {
    height: calc(100% - 75px);
}

谁能看到我做错了什么？任何想法都会非常感激。

Answer 1

百分比高度根据其父项高度计算，因此您必须从最父元素开始，然后将其级联到具有修改高度的所需元素。您还有两个JBoss div，.PageView无法使用相同的CSS正常工作;我不确定这是否是故意的。

此外，如果您使用的是calc，则需要调整每个Bootstrap断点的像素数量。

＆＃13;

html, body, .PageView {
  height:100%;
}

.links {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 28px;
    color: #FFFFFF;
}
#logoStripe {
    background-color: #54534a;
}
.adjustedHeight {
    height: calc(100% - 77px);
    background-color:red; /* For emphasis */
}
.PageView .navbar {
    margin:0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="PageView">
    <nav class="navbar navbar-default">
        <div class="container-fluid" id="logoStripe">
            <!-- Brand and toggle get grouped for better mobile display -->
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="defaultNavbar1">
                <ul class="nav navbar-nav links">
                    <li><a href="#">About<span class="sr-only">(current)</span></a> 
                    </li>
                    <li><a href="#">Pre-Order</a> 
                    </li>
                    <img src="Images/Logo.png" alt="Logo" style="width:auto; height:75px; padding-top:5px; padding-bottom:5px;">
                    <li><a href="#">News</a> 
                    </li>
                    <li><a href="#">Contact Us</a> 
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <div class="container-fluid adjustedHeight">
        <div class="PageView2">
            <div class="row">
                <div class="col-md-12">.col-md-1</div>
            </div>
            <div class="row">
                <div class="col-md-6">Button 1 (align Right)</div>
                <div class="col-md-6">Button 2 (align Left)</div>
            </div>
        </div>
</div>

＆＃13;

Bootstrap响应布局不适用于Calc CSS函数

1 个答案: