Блог

Главная - Вопросы по программированию - Не удается получить равные высоты столбцов после того, как текст расширяет границу страницы

Не удается получить равные высоты столбцов после того, как текст расширяет границу страницы

#css

#css

Вопрос:

У меня есть следующая скрипка: https://jsfiddle.net/n2fole00/x200bfjs /

Как вы можете видеть, если текст панели не превышает размер страницы, панели идеально подходят пропорционально друг другу, иначе возникает нежелательный эффект несоответствия высоты панелей или текст вытекает из панелей. Присвоение панелям свойства min-height устраняет выделение текста, но не устраняет несоответствие высоты столбцов.

Любой совет? Спасибо.

HTML

 <div class="hm-left">
  <div class="cafe hm-panel">
    <h1>Cafe</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
    </p>
  </div>
  <div class="restaurant hm-panel">
    <h1>Restaurant</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
    </p>
  </div>
</div>
<div class="hm-right">
  <div class="services hm-panel"><h1>Services</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
    </p>
</div>
</div>

CSS

 body, html {
  width: 100%;
  height: 100%;
  margin:0;
  color: white;
}

.hm-panel {
  padding: 15px;
}

.hm-left {
  width: 50%;
  height: 100%;
  float:left;
}

.hm-right {
  width: 50%;
  height: 100%;
  float:right;
}

.cafe {
  background-color: #6B8E23;
  height: 50%;
}

.restaurant {
  background-color: brown;
  height: 50%;
}

.services {
  background-color: #FF8C00;
  height: 100%;
}

Ответ №1:

Я добавил box-sizing: border-box также overflow-y: auto; к каждому из ваших контейнеров, чтобы получить точные размеры для поля, а также сохранить текст видимым внутри контейнера.

Вот скрипка:

https://jsfiddle.net/x200bfjs/2/

Обновить:

Чтобы сохранить overflow: auto на уровне страницы, мне пришлось изменить структуру html. Я поместил все в контейнер и дал ему оранжевый фон для служб. Надеюсь, это не проблема. Вот скрипка:

https://jsfiddle.net/x200bfjs/3/

Комментарии:

1. Спасибо за пример. Это было хорошее решение, но я не пояснил, что переполнение должно быть только на уровне страницы (не на уровне панели).

2. Посмотрите мое обновление, которое даст вам то, что вы ищете.

3. Еще раз, это была хорошая работа, но я понятия не имею, какой будет длина текста, поэтому, если текст служб превышает высоту двух других панелей, оранжевый фон отображается с левой стороны.

4. О, ты все же подал мне отличную идею. С небольшим JS я могу изменить фон в зависимости от того, какая сторона выше… if ($('.hm-left').height() < $('.hm-right').height()) { $("body").css("background-color","brown"); } else { $("body").css("background-color","#FF8C00"); } Если кто-то не подключится к решению, не основанному на скриптах, я отмечу ваш ответ как решение.

5. потрясающе, рад, что он хотя бы указал вам правильное направление!

Ответ №2:

У меня все еще были некоторые проблемы с моим ответом на предложение Джейка Зейца, но у меня есть следующее, которое, похоже, работает для всех разных сценариев — например, содержимое панелей меньше высоты документа, и то же самое, когда оно больше.

Решение состояло в том, чтобы немного изменить CSS с помощью некоторых min-height свойств, а также манипулировать столбцами hm-left и hm-right , чтобы они соответствовали высоте документа с помощью jQuery.

CSS

 body, html {
  width: 100%;
  min-height: 100%;
  margin:0;
  color: white;
}

.hm-left {
  width: 50%;
  min-height: 100%;
  float:left;
}

.hm-right {
  width: 50%;
  min-height: 100%;
  float:right;
}

.cafe {
  background-color: #6B8E23;
  height: 50%;
}

.restaurant {
  background-color: brown;
  height: 50%;
}

.services {
  background-color: #FF8C00;
  height: 100%;
}

jQuery

 var doc_height = $(document).height();

$(".hm-left").css("height", doc_height   "px");
$(".hm-right").css("height", doc_height   "px");