Есть ли свойство css min-top

Есть ли какое-либо свойство css, например min-height, но для верхнего? В приведенном ниже примере, когда я скрываю div1 (через javascript), я хочу, чтобы div2 имел верх: 50. Else, для размещения ниже div1.

<html>
<head>
<style>
#div1
{
height:100px;
}
#div2{
//min-top:50px;
}
</style>
</head>

<body>
<div id='div1'>This div may be hidden</div>
<div id='div2'>This div must not be placed above 50px</div>
</body>
</html>

Изменить: как я ответил ниже

Когда div1 не скрыт, я хочу, чтобы div2 был точно ниже div1. представьте div1 как дерево, которое может иметь любую высоту (или даже быть скрытой) и div2 как абзац, который всегда должен быть ниже 50px

Ответы

Ответ 1

Я вижу, что в этом вопросе еще много просмотров, и люди все еще комментируют. Из-за того, что вопрос не получил полного ответа, я решил написать полный ответ:

Соответствующий css:

#div1 {
    min-height:50px;
    background-color: #fee;
    margin-bottom:-50px;
}
#div2 {
    margin-top:50px;
    background-color: #efe
}

http://jsfiddle.net/vVsAn/5051/

Результаты

  • Когда div1 скрыт, div2 имеет верхнее свойство 50px
  • Когда div1 не скрыт:
    • Если высота div1 меньше 50px, то div2 помещается в 50px
    • Если div1 height больше 50px, div2 устанавливается прямо под div1

Ответ 2

Нет ничего подобного min-top

Вместо этого вы можете использовать

div {
   position: relative;
   top: 50px;
}

И для примера, который вы показали, visibility: hidden; будет лучше всего подходит здесь, так как он зарезервирует пространство вашего скрытого div

Ответ 3

Я придумал это решение, в котором используется верх: 0 внизу: 0 hack.

Мы создаем контейнер с высотой его относительного родителя (если таковой имеется) - тогда мы даем ему минимальную высоту (например, ваш min-top)

Затем мы помещаем фактический элемент абсолютно в нижнюю часть этого контейнера.

CSS

.container {
  position:absolute;
  bottom:0px;
  top: 0;
  min-height: 700px; //Adjust this to your MINIMUM (eg your min-top)
}

.position-me {
  position: absolute;
  bottom: 0;
}

HTML:

<div class="container">
    <div class="position-me">Great!</div>
</div>

Ответ 4

Я подозреваю, что это сделает трюк для вас, но я считаю, что это не очень хорошая практика:

#div1
{
    height:100px;
    outline: 1px solid red;
    margin-bottom:-50px;
}
#div2{
    margin-top:50px;
    outline: 1px solid blue;
}

DEMO: http://jsfiddle.net/pavloschris/tbbvU/

(Просто комментируйте/раскомментируйте display:none, чтобы увидеть, как он работает.)

Ответ 5

$(window).on("resize", function () {
    if ($('#div1').css('display', 'none')){
    	$("#div2").addClass('minTop');
	} else if ($('#div1').css('display', 'block')){
		  $("#div2").removeClass('minTop');
	}
}).resize();
#div1{
width:100px;
height:100px;
background-color:#ff0000;
position:absolute;
display:block;
/* display:none; */
}
#div2{
width:100px;
background-color:#ffff00;
top:150px;
position:absolute;
}
#div2.minTop{
  top:50px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>

<body>
<div id='div1'>div 1</div>
<div id='div2'>div 2</div>
</body>
</html>