Я создаю адаптивный сайт, используя Bootstrap.Пока что это прекрасно работает, если я изменяю размер окна по горизонтали, но если я изменяю размер окна по вертикали, я не хочу, чтобы высота содержимого (столбцы Bootstrap, изображения и другие элементы div) изменялась.Я не смог найти хорошего ответа на этот вопрос, поэтому кто-нибудь знает, что я мог сделать, чтобы решить эту проблему?
Редактировать: я приложил пару фотографий, чтобы показать, что я не хочуслучиться.
Это - это то, на что похожа часть сайта, о которой я беспокоюсь, когда окно не было изменено по вертикали.
Это - это то же, что и та же часть, когда окно сжимается вертикально.Текст бежит снизу содержащего 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>