CSS: как использовать min-height прилично - PullRequest
Новая
       33

CSS: как использовать min-height прилично

0 голосов
/ 19 октября 2018

Я застрял на глупой проблеме CSS, которая была задана 100 раз, но никогда не получила достойного ответа, или, по крайней мере, не на мою проблему.

Я получил страницу с нижним колонтитулом,и с боковой панелью в начальной загрузке 3.3.7.У меня проблема в том, что кажется, что невозможно установить минимальную высоту страницы на 100%.Поэтому мне нужна страница, где нижний колонтитул всегда находится в конце страницы, а страница имеет минимальную высоту экрана (100%), это достигается установкой минимальной высоты на 100%, работает как шарм.Проблема в том, что внутри страницы есть обертка, которую нужно растянуть как минимум до высоты страницы.Это достигается с помощью хака заполнения: padding-bottom: 99999px; и margin-bottom: -99999px;.

Однако это работает только в Chrome.Во всех других браузерах вы можете прокрутить вниз до 99999 пикселей.Чтобы предотвратить это, я добавил overflow: hidden, но это означает, что минимальная высота больше не равна 100%.Я добавил min-height везде, но, очевидно, если вы не укажете высоту родителя, это не сработает.

Итак, я ищу способ распространения минимальной высоты без установки высоты (потому что установка высоты, конечно, нарушает все).

В приведенной ниже скрипке я продемонстрировал проблемуЯ хочу, чтобы цвет фона красного и зеленого заполнял всю высоту, а нижний колонтитул остается внизу.

https://jsfiddle.net/wc9yh243/5/

HTML: 

<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV class="wrapper"> 
<DIV class="width50 green">
<DIV class="content">
<DIV class="text">
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
</DIV>
</DIV>
</DIV>
<DIV class="width50 red">
<DIV class="content">
<DIV class="text">
some text which is shorter than the page
</DIV>
</DIV>
</DIV>
<DIV class="footer">
Some footer
</DIV>
</DIV>
</BODY>
</HTML>

CSS: 

html {
  height: 100%;
}

body {
  height: 100%;
}

.wrapper {
  position: relative;
  min-height: 100%;
  padding-bottom: 45px;
}

.width50 {
  min-height: 100%;
  width: 49%;
  display: inline-flex;
}

.content {
  min-height: 100%;
}

.green {
  background-color: #AAFFAA;
}

.red {
  background-color: #FFAAAA;
}

.footer {
  bottom: 0;
  height: 45px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 3;
  background-color: grey;
}

Ответы [ 3 ]

0 голосов
/ 19 октября 2018

используйте display:flex для clss .wrapper , как показано ниже: 

.wrapper {
  position: relative;
  min-height: 100%;
  padding-bottom: 45px;
  display:flex;/*newly added css*/
}
0 голосов
/ 19 октября 2018

Используя bootstrap, вы можете создать базовую сетку, в которой оба элемента div находятся в одном контейнере, и строка будет выглядеть примерно так.В этом случае контейнер с меньшим количеством текста всегда будет иметь тот же размер, что и зеленый, независимо от его содержимого.

HTML: 

<div class="container">
 <div class="row">
  <div class="col-6 red">red and more text red and more text red and more textred and more textred and more textred and more textred and more textred and more textred and more textred and more textred and more textred and more textred and more text</div>
   <div class="col-6 green">green</div>
  </div>
 </div>

CSS: 

.red {
  background-color:red;
}

.green{
  background-color:green;
}

https://codepen.io/PMertgen/pen/KGRBbp

0 голосов
/ 19 октября 2018

Добавить отображение: flex в оболочке css class: 

.wrapper {
  position: relative;
  min-height: 100%;
  padding-bottom: 45px;
   display: flex;
}
...