Html css-对齐div以在浏览器中占据全高_Html_Css_Twitter Bootstrap 3

Html css-对齐div以在浏览器中占据全高

html css twitter-bootstrap-3

Html css-对齐div以在浏览器中占据全高,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我希望实现下图。我真的不确定如何让css为下面的结构工作。我应该将DIV2设置为绝对值吗？我希望nav、div1和div2占据broswer的全部高度我的HTML框架如下 <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header">

我希望实现下图。我真的不确定如何让

css

为下面的结构工作。我应该将

DIV2

设置为绝对值吗？
我希望nav
、div1
和div2
占据broswer的全部高度

我的HTML框架如下
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                </a>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div>
                    DIV 1
                </div>
                <div>
                    DIV 2
                </div>
            </div>
        </div>
    </div>
</body>


第一组
第2组
不要使用引导网格。
使用flexbox。
父div必须具有100%高度、显示：柔性和列方向。这样想。不要使用引导网格。
使用flexbox。
父div必须具有100%高度、显示：柔性和列方向。这样想。
将
和
设置为100%高度，然后将div
上的高度设置为您希望的大小（例如80%），以及div
的容器。百分比高度基于元素的父元素。
将
和
设置为100%高度，然后将div
上的高度设置为您希望的大小（例如80%），以及div
的容器。百分比高度基于元素的父元素。必须使用容器类而不是容器流体，才能使div在页面上居中
她知道密码吗
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
            </a>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div>
                DIV 1
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div>
                DIV 2
            </div>
        </div>
    </div>
</div>


第一组
第2组


对于高度，您可以使用vh css单元或使用Felxbox，如果您选择第二种解决方案，您可能可以使用BS的V4，您必须使用容器类而不是容器流体，以使div在页面上居中
她知道密码吗
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
            </a>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div>
                DIV 1
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div>
                DIV 2
            </div>
        </div>
    </div>
</div>


第一组
第2组


对于高度，您可以使用vh css单元或使用Felxbox，如果您选择第二种解决方案，您可能可以使用BS的V4
我提供了一个非引导式答案，以帮助您理解flexbox
第一步是将父容器设置为全高
.container{
     display: flex;
     height: 100vw;
     flex-direction: column; 
}

然后使用flex:1我们允许孩子们占用所有可用空间
最后一步是使用max height
限制第二个子项的最大高度
工作示例
我提供了一个非引导式答案，以帮助您理解flexbox
第一步是将父容器设置为全高
.container{
     display: flex;
     height: 100vw;
     flex-direction: column; 
}

然后使用flex:1我们允许孩子们占用所有可用空间
最后一步是使用max height
限制第二个子项的最大高度
工作示例
您可以根据HTML结构找到CSS样式。代码没有响应性，但它将为您提供如何着手解决自己问题的想法

正文{
保证金：0；
}
navbar先生{
背景：蓝色；
高度：50px；
}
.容器流体。第列col-md-6{
最大宽度：60%；
保证金：0自动；
显示器：flex；
弯曲方向：立柱；
//50px是导航条的高度，所以从总高度中减去它
高度：计算（100vh-50px）；
}
.col-md-6>分区{
显示器：flex；
证明内容：中心；
对齐内容：居中对齐；
字体大小：30px；
}
.col-md-6分区：第一个孩子{
弹性：1；
最小高度：400px；
/*设置最小高度，使div的高度不会低于400px，否则由于flex:1，它将小于div2
柔性：1取高度的100%-50px-100px
*/
背景色：红色；
}
.col-md-6分区：最后一个孩子{
高度：100px；
背景颜色：绿色；
}

第一组
第2组
您可以根据HTML结构找到CSS样式。代码没有响应性，但它将为您提供如何着手解决自己问题的想法

正文{
保证金：0；
}
navbar先生{
背景：蓝色；
高度：50px；
}
.容器流体。第列col-md-6{
最大宽度：60%；
保证金：0自动；
显示器：flex；
弯曲方向：立柱；
//50px是导航条的高度，所以从总高度中减去它
高度：计算（100vh-50px）；
}
.col-md-6>分区{
显示器：flex；
证明内容：中心；
对齐内容：居中对齐；
字体大小：30px；
}
.col-md-6分区：第一个孩子{
弹性：1；
最小高度：400px；
/*设置最小高度，使div的高度不会低于400px，否则由于flex:1，它将小于div2
柔性：1取高度的100%-50px-100px
*/
背景色：红色；
}
.col-md-6分区：最后一个孩子{
高度：100px；
背景颜色：绿色；
}

第一组
第2组
@lukeramden，我说的是身高，你能解释一下你想做得更好一点的原因吗？你试过什么？@Lukeramden，更新了问题我会用CSSflex
来解决这个问题。这也可以与引导v4结合使用。不久前，这让我大开眼界；）如果你了解flex，它有很多用途，比如yours@Stretau，请根据我的结构将此作为答案发布。我有一个nav
元素让我很困惑。@Lukeramden，我说的是height
你能解释一下你想做得更好一点的是什么吗？你试过什么？@Lukeramden，更新了问题我会用CSSflex
来解决这个问题。这是公司