Расширьте DIV вертикально снизу вверх - PullRequest
Новая
       7

Расширьте DIV вертикально снизу вверх

1 голос
/ 02 декабря 2011

Я бы хотел расширить DIV по вертикали снизу вверх без использования процентов или функций (только css).У меня есть два div, но только второй имеет определенную высоту, поэтому я должен исправить оставшееся пространство с моим первым div.

Вот мой код: 

<html>
<head>
  <style>
    #one { position: absolute; width: 100%; background: red; top: 0 }
    #two { position: absolute; width: 100%; background: yellow; bottom: 0; height: 200 }
  </style>
</head>

<body>
  <div id="one">"DIV 1" has to be stucked to "DIV 2"</div>
  <div id="two">I wanna "DIV 2" determines the height of "DIV 1"</div>
</body>

</html>

Вы можете поместить код здесь, чтобы увидеть, что я получаю

Проблема в том, что красный div остается сверху: S

Любая помощь будет оценена, спасибоза ваше время!Дружелюбный, Чумпокомон

Ответы [ 5 ]

2 голосов
/ 19 мая 2014

Способ сделать это на чистом CSS - добавить в пример только одну строку кода: 

#one { height:calc(100% - 200px);}

и все готово:)

Пример

2 голосов
/ 02 декабря 2011

Если я правильно понял ваши вопросы, это должно быть то, что вы ищете:

http://jsfiddle.net/peduarte/RnKmE/1/

* EDIT *

Я не уверен, что вы можете сделать это с помощью CSS. Тем не менее, я сделал пример в JQuery. http://jsfiddle.net/peduarte/RnKmE/3/

0 голосов
/ 18 апреля 2014

проверьте это, я думаю, это то, что вы ищете:

jsfiddle.net / mcverde / XZ253 /

Сценарий только для добавленияконтент на лету. 

#uno {
width: 150px;
background-color: rgba(244, 244, 244, 0.59);
font-family: sans-serif;
padding: 5%;
bottom: 10%;
position: absolute;
border: 1px solid #4E4E4E;
    max-height:150px;
    overflow:scroll;
    overflow-x:hidden;
}

#enviar{
width:300px;
    height:100px;
cursor:pointer;
}
0 голосов
/ 02 декабря 2011

Демо 

 body,html{ height:100%; }
 #one { height:100%; }
0 голосов
/ 02 декабря 2011

Напишите так: 

#one { 
  position: absolute; 
  width: 100%; 
  background: red; 
  top: 0; 
  bottom:200px
 }

http://jsfiddle.net/sj2AD/7/

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

Похожие темы

...