Блог

Главная - Вопросы по программированию - Я не могу найти способ разместить свое тело, чтобы иметь хотя бы полный экран или больше, если есть контент?

Я не могу найти способ разместить свое тело, чтобы иметь хотя бы полный экран или больше, если есть контент?

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Это, вероятно, похоже на повторный вопрос (поскольку я видел 1000 сообщений, подобных этому), но у всех них один и тот же ответ: «сделайте свой html и body высота 100% / 100vh !» ну, это, похоже, не работает.

Я действительно новичок в css, но я знаю, что высота 100% должна ссылаться на родительский элемент, поэтому я говорю это body и html имею 100% высоту… Я спрашиваю себя: « 100% Чего?» и это, вероятно, ошибка, но я включил свой пример, чтобы показать свое разочарование!

У меня есть 3 div в body , я хочу, чтобы первые два были примерно 150px одинаковой высоты, а мой 3-й, я хочу, чтобы это была остальная часть страницы — даже если контента нет. Если содержимое будет больше, чем пространство окна, я хочу, чтобы появилась полоса прокрутки, и я хочу, чтобы мой div был полностью опущен, пока есть содержимое!

 <!doctype html>
<html lang="en" style="height : 100vh;" >
<head>
  <meta charset="utf-8">
  <title>Gaming4Money</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body style="background-color : red; height: 100vh;">
  <div style="background-color : yellow; height: 100px"> asd</div>
  <div style="background-color : blue; height: 50px">asd</div>
  <div style="background-color : green;  height:100%; ">asd<p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p><p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  <p>asdasd</p>
  
  </div>
</body>
</html>

Этот код является базовым, и я просто не могу его отключить…

Вот что происходит введите описание изображения здесь

Что я хочу: зеленый div цвет распространяется до конца, почему-то он не идет, и когда я проверяю body , он останавливается перед зеленым?

введите описание изображения здесь

Спасибо за помощь

Ответ №1:

Здесь у вас есть способ сделать это. Я рекомендую вам прочитать о flexbox, это очень полезно. Я нашел эту страницу, где вы можете понять, как это работает: гибкие CSS-трюки

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Gaming4Money</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style type="text/css">
      html, body {
          height: 100%;
          background-color: blue;
      }

      #wrapper {
          background-color: red;
          min-height: 100%; 
          display: flex;
          flex-direction: column;
      }
  </style>
</head>
<body>
  <div id="wrapper">
    <div style="height: 150px; background-color: pink"> First Div</div>
    <div style="height: 150px; background-color: orange">Second div</div>
    <div style="background-color: green; flex: 1">Third div</div>
  </div>
</body>
</html>