Question

我正在使用Bootstrap建立一个响应式网站。到目前为止，如果我水平调整窗口大小会很好，但是如果我垂直调整窗口大小，我不希望更改内容（Bootstrap列，图像和其他div）的高度。我还没有找到一个好的答案，所以有人知道我能解决这个问题吗？

编辑：我已附上几张照片以展示我不想发生的事情。

This是窗口未垂直调整大小时我所关注的网站部分。

This是垂直缩小窗口时相同部分的外观。文本从包含div的底部开始。如果我垂直缩小窗口，我希望将div保持相同的高度，而如果水平调整窗口的大小，则仍要更改宽度。

对不起，我没有太多经验，这是我第一次发布，因此请告诉我是否应该提供更多信息！

编辑2：这是我的代码

body {
  background-color: #f4f4f4;
  color: #111111;
  height: auto!important;
  min-height: 100vh;
}

#home-content {
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 0;
  padding-top: 7.5vh;
}

.col-content {
  background-color: #fdfdfd;
  height: 40vh;
  margin-bottom: 5vh;
  margin-left: 1vw;
  box-shadow: 1px 1px 3px #555555;
}

#intro-content {
  padding: 5px 10px 5px 10px;
}

h2 {
  font-size: 200%;
  margin-top: 2vw;
  margin-bottom: 1vw;
  font-family: Perpetua;
  text-align: center;
}

#intro-hr {
  background-color: #444444;
  height: 1px;
  margin: -5px 0 5px 0;
}

#intro-text {
  text-align: left;
  margin-top: 1vw;
  font-family: verdana;
  font-size: 16px;
}

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="width=100px, initial-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link href="css/styles2.css" rel="stylesheet" type="text/css" />

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/script.js"></script>

</head>


<body>

  <div id="home-content" class="container-fluid">
    <div class="row">
      <div id="intro" class="col-lg-6">
        <div id="intro-content" class="col-content top left">
          <h2> Title </h2>

          <hr id="intro-hr">

          <p id="intro-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras placerat molestie volutpat. Nam gravida tortor id tellus pulvinar sodales. Duis sodales sagittis ex, a ultricies lacus tempus vel. Maecenas lobortis venenatis sem. Nulla at odio vehicula, volutpat
            quam eu, fermentum dolor.
          </p>
        </div>
      </div>

      <div id="contact" class="col-lg-6">
        <div id="contact-content" class="col-content top">

        </div>
      </div>
    </div>

Answer 1

高度100vh可能会有所帮助，因为它占据了视口高度的100％

Answer 2

如果要使两列具有相同的大小或使用任何其他方式，请使用auto作为col-content的高度，并为其分配最小高度。但罪魁祸首是固定高度。

Answer 3

如果删除此css部件的40vh部分，应该没问题，因为您说它必须为40vh，当您调整视口的宽度大小并且文本变小时，视口高度仍为40vh，这始终保持不变。如果您不指定高度，它将自动指定高度为自动

   c1   c2
0  abc  1
1  bca  2
2  cab  3

具有响应宽度但高度固定的网站内容

3 个答案: