HTML & CSS - min-height: 100% не работает на моем сайте - PullRequest
Новая
       3

HTML & CSS - min-height: 100% не работает на моем сайте

2 голосов
/ 11 июля 2020

Я делаю сайт. Я хочу разделить веб-сайт на 2 столбца разной ширины и одинаковой высоты. Поэтому независимо от того, в правом столбце больше текста или в левом, я хочу, чтобы они оба были равны по горизонтальной длине.

Мой код: 

body {
  background-color: #003399;
  color: #FFCC00;
  margin: 0;
  padding: 0;
}

.main-part {
  float: left;
  width: 60%;
  border-right-style: solid;
  border-right-color: #FFCC00;
  border-right-width: 3px;
  margin-right: 10px;
  height: 100%;
  min-height: 100%;
}

.additional-part {
  height: 100%;
  min-height: 100%;
  /* margin-left: 10px; */
}
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div class="container">
    <div class="main-part">

      <h1>Main text</h1>

    </div>


    <div class="additional-part">

      <h1>Additional text</h1>

      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>

    </div>
  </div>

</body>

</html>

Проблемы:

  1. Правый столбец - как видно с атрибутом border-right и "aaaaa" в левый - выполняется до тех пор, пока не закончит свой текст, затем он резко заканчивается, и левый столбец занимает свое место вместо того, чтобы правильно держаться слева, как я sh. Ему нужны два столбца одинакового размера, и в настоящее время у меня есть "прямоугольник" справа и "прыгающий" div слева, который не привязан к самому себе.

  2. Я не знаю почему, но когда я смотрю на правый верхний заголовок и левый верхний заголовок (я говорю об основном тексте и дополнительных текстовых элементах), они находятся на двух разных уровнях, правый ниже левого. Я хочу, чтобы они начинались с одинаковой «высоты», чтобы быть симметричными c и красивыми.

Ответы [ 3 ]

1 голос
/ 11 июля 2020

Вот grid-box, который позволяет нам создавать определенные столбцы и строки, и после вставки содержимого по нашему желанию это лучший способ создания макетов сетки 

body {
  height: 100vh;
}

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: darkcyan;
  width: 100%;
  height: 100%;
}

.main-part {
  width: 100%;
  border: 1px solid red;
  text-align: center;
}

.additional-part {
  text-align: center;
  width: 100%;
  border: 1px solid blue;
}
<div class="container">
  <div class="main-part">
    <h1>Main text</h1>
  </div>
  <div class="additional-part">
    <h1>Additional text</h1>
    <p>Aaaaa</p>
    <p>Aaaaa</p>
    <p>Aaaaa</p>
    <p>Aaaaa</p>
    <p>Aaaaa</p>
    <p>Aaaaa</p>
  </div>
</div>
0 голосов
/ 11 июля 2020

Если вы используете bootstrap 4

иначе, попробуйте это 

.container{
  display: flex;
  flex-flow: row wrap;
}

.main-part, .additional-part {
  background-color: red;
}
0 голосов
/ 11 июля 2020

100% - это 100% родительского элемента (тела), но тело адаптирует свой размер к своим дочерним элементам. Вместо этого вы должны использовать min-height: 100vh.

Кроме того, не используйте float для чего-либо, кроме изображений и «размытий» в тексте. В этом случае я бы использовал display: flex вместо размещения ваших элементов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...