Question

我正在努力实现下图。我不确定如何使css用于以下结构。我应该制作DIV2 absolute吗？我希望nav，div1和div2占据整个浏览器的高度。

我的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>

Answer 1

将<html>和<body>设置为100％height，然后将height上的div设置为您希望它们的大小（例如80％），以及div的容器。高度百分比基于元素的父级。

Answer 2

我提供了一个非引导答案，以帮助您了解flexbox。

将父容器设置为全高是第一步。

.container{
     display: flex;
     height: 100vw;
     flex-direction: column; 
}

然后使用flex: 1;，我们允许孩子们占用所有可用空间。

最后一步是使用max-height来限制第二个孩子的最大身高。

工作示例here

Answer 3

Here，您可以根据HTML结构找到CSS样式。该代码没有响应能力，但是它将为您提供有关如何解决自己的问题的想法。

body {
  margin: 0;
}

.navbar {
  background: blue;
  height: 50px;
}

.container-fluid .row .col-md-6 {
  max-width: 60%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  // 50px is height of the navbar so subtracting it from total height 
  height: calc(100vh - 50px); 
}

.col-md-6 > div {
  display: flex;
  justify-content: center;
  align-content: center;
  font-size: 30px;
}

.col-md-6 div:first-child {
  flex: 1;
  min-height: 400px;
  /*Setting minimum height so height of div will not go below 400px otherwise it will get smaller than div2 due to flex:1
  flex: 1 takes 100% of height - 50px - 100px 
  */
  background-color: red;
}

.col-md-6 div:last-child {
  height: 100px;
  background-color: green;
}

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

Answer 4

请勿使用引导网格。使用flexbox。父div必须具有100％的高度，显示：flex和column direction。这样想。

Answer 5

您必须使用 container 类而不是 container-fluid 才能使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>

对于高度，您可以使用 vh css单位或使用 Felxbox ，如果选择了第二种解决方案，则可以使用BS的 V4 < / p>

css-如果浏览器

5 个答案: