html div没有占据浏览器的全部高度

编程问答 2022-08-13

问题描述

我正在尝试将屏幕分成两部分，因此宽度基本上为50％，并且每一部分都必须占据浏览器的整个高度。但是我无法填充整个高度，如下图所示，它显示为白色区域

到目前为止，我已经准备好了：

UI

* {
  margin: 0;
}

html,body {
  height: 100%;
}

.container {
  margin: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.container-fluid {
  margin: 0;
  height: 100vh;
  overflow-y: hidden;
  justify-content: center;
  align-items: center;
  text-align: center;
}
<div class="container-fluid  d-flex flex-column">

  <div class="row">

    <div class="col-sm-6" style="background-color: green">
      <img src="./images/user2.png" alt="user" style="height: 256px; width: 256px" />
      <h1>STATUS: IN</h1>
      <h1>NAME: MIKE LEE</h1>
      <h1>EMPLOYEE ID: XX/YY/00</h1>
      <h1>CONTRACTOR: SAMPLE PVT. LTD.</h1>
      <h1>GRANTED ACCESS</h1>
      <h1></h1>
    </div>

    <div class="col-sm-6" style="background-color: red">
      <img src="./images/default_user_round.png" alt="user" style="height: 256px; width: 256px" />
      <h1>STATUS: OUT</h1>
      <h1>NAME: JOHN DOE</h1>
      <h1>EMPLOYEE ID: EXAMPLE/SAMPLE/00</h1>
      <h1>CONTRACTOR: EXAMPLE PVT. LTD.</h1>
      <h1>DENIED ACCESS</h1>
      <h1>REASON: 60 HOUR VIOLATION DETECTED</h1>
    </div>

  </div>

</div>

如果只有一个部分，则它必须占据浏览器的整个高度和宽度。我正在使用行，但这不是强制性的，或者是否有其他方法可以让我知道。

谢谢！

解决方法

请尝试

* {
  margin: 0;
}

html,body {
  height: 100%;
}

.container {
  margin: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.container-fluid {
  margin: 0;
  height: 100vh;
  overflow-y: hidden;
  justify-content: center;
  align-items: center;
  text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-6" style="background-color: green">
      <img src="./images/user2.png" alt="user" style="height: 256px; width: 256px" />
      <h1>STATUS: IN</h1>
      <h1>NAME: MIKE LEE</h1>
      <h1>EMPLOYEE ID: XX/YY/00</h1>
      <h1>CONTRACTOR: SAMPLE PVT. LTD.</h1>
      <h1>GRANTED ACCESS</h1>
      <h1></h1>
    </div>

    <div class="col-sm-6" style="background-color: red">
      <img src="./images/default_user_round.png" alt="user" style="height: 256px; width: 256px" />
      <h1>STATUS: OUT</h1>
      <h1>NAME: JOHN DOE</h1>
      <h1>EMPLOYEE ID: EXAMPLE/SAMPLE/00</h1>
      <h1>CONTRACTOR: EXAMPLE PVT. LTD.</h1>
      <h1>DENIED ACCESS</h1>
      <h1>REASON: 60 HOUR VIOLATION DETECTED</h1>
    </div>

  </div>

</div>

,

查看此代码段：

* {
  margin: 0;
}

html,body {
  height: 100vh;
}

.container-fluid {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.full-height{
height: 100vh;
}

@media only screen and (max-width: 600px) {
  .full-height{
    overflow-y: scroll;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">s
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
    <title>Display</title>
</head>

<body>
    <div class="container-fluid  d-flex flex-column">

        <div class="row">

            <div class="col-sm-6 full-height" style="background-color: green">
                <img src="./images/user2.png" alt="user" style="height: 256px; width: 256px" />
                <h1>STATUS: IN</h1>
                <h1>NAME: MIKE LEE</h1>
                <h1>EMPLOYEE ID: XX/YY/00</h1>
                <h1>CONTRACTOR: SAMPLE PVT. LTD.</h1>
                <h1>GRANTED ACCESS</h1>
                <h1></h1>
            </div>

            <div class="col-sm-6 full-height" style="background-color: red">
                <img src="./images/default_user_round.png" alt="user" style="height: 256px; width: 256px" />
                <h1>STATUS: OUT</h1>
                <h1>NAME: JOHN DOE</h1>
                <h1>EMPLOYEE ID: EXAMPLE/SAMPLE/00</h1>
                <h1>CONTRACTOR: EXAMPLE PVT. LTD.</h1>
                <h1>DENIED ACCESS</h1>
                <h1>REASON: 60 HOUR VIOLATION DETECTED</h1>
            </div>

        </div>

    </div>
</body>

</html>

首先，我已更正了您的<meta>开头部分的规则。而且因为我们想使我们的内容对各种显示都做出响应，所以我使用了vh值。

您尚未使用.container，因此我将其删除。可能您只是在测试它和container-fluid。

接下来，我为代码的可重用性创建了单独的类.full-height，并将height: 100vh;设置为其内容，并将其与两列一起使用，以使它们达到视口的全部高度

最后，我确定您不想在小型设备上隐藏内容。因此，我在overflow-y: scroll;内部使用了@media only screen and (max-width: 600px)，以确保在小型设备上的div内部滚动。如果要隐藏它，只需将overflow-y: scroll;替换为overflow-y: hidden;

,

尝试将父容器（.row）设置为显示弹性。

.row {
  display: flex;
}

应该这样做，然后您可以使用css-flex属性see here

修改它们的外观
htmltwitter-bootstrap