Сделать div заполнить остальную часть страницы (кросс-браузер)

0

Я просто хочу сделать div ниже некоторых фиксированных текстов, и я хочу, чтобы div заполнил ровно высоту страницы, и я хочу, чтобы она работала в кросс-браузере... Трудно поверить, сколько работы такое требуется природоохранная задача.

Я попробовал этот код, который регулирует высоту с помощью jQuery. Он отлично работает в Chrome, но в Chrome он не работает отлично: если мы прокручиваем вниз, мы можем видеть, что он не восстанавливается автоматически в исходное положение.

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <style>
    body {
      margin: 0
    }
    .rb .myME {
      background: grey
    }
  </style>
</head>
<body>
  <div class="rb">
    <div class="top">1<br/>2<br/>3<br/>4<br/></div>
    <div class="myME">abc</div>
  </div>
  <script>
    $(".myME").css({
      height: (($(document).height()) - $(".top").height()) + 'px'
    })
  </script>
</body>
</html>

Есть ли у кого-нибудь идеальное решение (CSS или jQuery) кросс-браузер?

  • 0
    Под идеальным кросс-браузерным решением вы подразумеваете такое, которое включает также старые / архаичные версии IE (6-9)?
  • 0
    Нет ... Я буду удовлетворен решением, которое работает с современными Chrome, IE и Safari.
Показать ещё 12 комментариев
Теги:
cross-browser
height

3 ответа

1
Лучший ответ

для более старых и новых браузеров, свойства display:table могут соответствовать вашим требованиям.

html,
body,
.rb {
  margin: 0;
  height: 100%;
}

.rb {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.top, .myME {
  display: table-row;
}

.buffer {
  display: table-cell;
}

.top .buffer {
  background: lightblue;
}

.myME .buffer {
  background: tomato;
  height:100%;
}
<div class="rb">
  <div class="top">
    <div class="buffer">
      1<br/>2<br/>3<br/>4<br/>
    </div>
  </div>
  <div class="myME">
    <div class="buffer">
      abc
    </div>
  </div>
</div>

.buffer div должен убедиться, что каждая из ваших строк сделана из одной ячейки, чтобы избежать разметки макета также в столбцах.

Поделиться
  • 0
    Большое спасибо. Ваше решение работает для меня, по крайней мере, в Chrome и Safari. На самом деле я хочу встроить Monaco Editor в myME , но высота не очень хорошо работает с вашим решением ( JSBin ), у вас есть идеи? Вы хотите, чтобы я отправил другой вопрос для этого?
  • 1
    будет ли это решением на данный момент? jsbin.com/tevizuviwe/1/edit?html,css,output выглядит так, как будто ваш редактор становится больше, чем область, где он должен стоять. или codepen.io/gc-nomade/pen/ZJJBym, но ваш редактор кажется глючным (полосы прокрутки недоступны)
Показать ещё 8 комментариев
0

Если верхний div является фиксированным размером (просто измените размер в обеих высотах в верхней функции div и calc), вы можете попробовать следующее:

body {
  margin: 0
}

.rb {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.top {
  width: 100%;
  height: 100px;
}

.myME {
  width: 100%;
  height: calc( 100% - 100px);
  background: grey;
}

html,
body {
  height: 100%;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="rb">
    <div class="top">1<br/>2<br/>3<br/>4<br/></div>
    <div class="myME">abc</div>
  </div>
</body>

</html>

Надеюсь, это поможет вам.

Поделиться
  • 0
    только для flex требуется: flex: 1; На ребенка положено заполнить оставшееся пространство. высота не нужна. самое простое решение для современных браузеров.
  • 1
    пример: codepen.io/gc-nomade/pen/brrBjv ;)
0

Если вы хотите сделать этот div под этим текстом, вам нужно сделать css там, вы можете найти много учебников, потому что он в основном:

Используйте position relative для родительского div и position absolute, чтобы div, что вы хотите переместить по тексту.

Если вы хотите использовать полную высоту, вам не нужно использовать jQuery VH - viewport height как height: 100vh; для полной высоты любых устройств.

Я не уверен, что VH работает повсюду, но он делает для меня в хром, лиса, край

В W3schools он работает здесь: https://www.w3schools.com/cssref/css_units.asp

Поделиться
  • 0
    Пожалуйста, предоставьте рабочий пример, я попробовал vh , он даже менее хорош, чем кросс-браузер jQuery.
  • 0
    Тогда я не понимаю ваши вопросы: я просто хочу сделать div под некоторыми фиксированными текстами - под или под? И я хочу, чтобы div заполнял точно высоту страницы - какой div, myme или rb? Для myme вы вычитаете высоту верхнего div из полной высоты. Так что я не понимаю, какой div вы хотите сделать в полный рост?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню